2

I have been spending a fair amount of time working on an issue with input elements, which are using inputmask, within a table sorted using tablesorter.

When the user enters an input in the masked field after the updateRows event has been triggered and then changes focus, the masked field will revert the content to the previously entered value.

I have poured through the documentation of both plugins to figure a workaround, but I have not found a suitable solution. I realize that there are other ways to work around this issue, however I have ajax code (for autosaving each row separately) that would require a rewrite that I do not wish to do if it could be avoided.

Any help would be appreciated.

Example: https://jsfiddle.net/5bqyod6j/1/

Code:

<table id='table'>
  <thead>
    <tr>
      <th class='sorter-inputs'>Col 1</th>
      <th class='sorter-inputs'>Col 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="control"><input type="text" class='money' value='25' form='f-1'></div>
      </td>
      <td>
        <div class="control"><input type="text" value='test2' form='f-1'></div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="control"><input type="text" class='money' value='12' form='f-2'></div>
      </td>
      <td>
        <div class="control"><input type="text" value='another 2' form='f-2'></div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="control"><input type="text" class='money' value='89' form='f-3'></div>
      </td>
      <td>
        <div class="control"><input type="text" value='val-2' form='f-3'></div>
      </td>
    </tr>
  </tbody>
  <!-- These are part of the ajax functionality -->
  <form action="" id="f-1"></form>
  <form action="" id="f-2"></form>
  <form action="" id="f-3"></form>
</table>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/tablesorter@2.31.3/dist/js/jquery.tablesorter.min.js" integrity="sha256-dtGH1XcAyKopMui5x20KnPxuGuSx9Rs6piJB/4Oqu6I=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/tablesorter@2.31.3/dist/js/parsers/parser-input-select.min.js" integrity="sha256-ugEATjydQqCNpuca1CGyiLVdN9N6uuouP2CkIL7Dr1k=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/RobinHerbots/jquery.inputmask@5.0.6/dist/jquery.inputmask.js" integrity="sha256-E9pFDiHlfB3afd46AyTqvmjcSv7VREgs5Y5e8TBECU0=" crossorigin="anonymous"></script>
<script>
  $('#table').tablesorter()
  $('.money').inputmask('currency', {
    autoUnmask: true,
    groupSeparator: ',',
    allowMinus: true,
    digits: 2,
    placeholder: '_',
    inputMode: 'decimal'
  })
  $('input[type=text]').on('change', function() {
    $('#table').trigger('updateRows')
  })
</script>
I_love_vegetables
  • 1,575
  • 5
  • 12
  • 26
Aesonus
  • 56
  • 4

1 Answers1

1

Found the issue. It lies within js/parsers/parser-input-select.js. It appears to attach some handlers at inopportune times to play nice with inputmask. Writing a custom parser or text extractor and updating the table at a better time seems to work well enough.

I have also discovered that even loading said file and not even using the parsers at all will trigger the bug.

Aesonus
  • 56
  • 4