Tablesorter containing a dropdown select (in body, not header or filter) not working in IE

Question

I am using tablesorter and in the main section of the table, one of the columns has a drop-down select. Everything works great in Chrome and Safari, but in IE 11, the dropdown doesn't work. If you click on the dropdown the list of choices pops up but then disappears. It will stay open as long as you hold the button down, but you are still not able to select any of the choices.

 $("#mytable")
    .tablesorter({
        theme: 'blue',
        headerTemplate: '{content} {icon}',
        widthFixed: false,
        widgets: ['zebra', 'filter', 'scroller'],
        widgetOptions: {
            scroller_height: 300,
            scroller_barWidth: 18,
            scroller_upAfterSort: true,
            scroller_jumpToHeader: true,
            scroller_idPrefix: 's_'
        }
    });

<table id="mytable" class="tablesorter">
  <thead>
    <tr>
      <th>ID</th>
      <th>Type</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>
        <select id="type" name="type">
          <option value="1">Type 1</option>
          <option value="2">Type 2</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

Any ideas as to how I can get this workiing in IE? Thank you,

Answer 1

This appears to be a bug in IE... I set up this demo showing the problem (reported).

To work-around this issue, you can comment out the $(':focus').blur(); within the parser-input-select.js file (line 107), assuming that you are using that file to parse the select values:

restoreValue = function(){
    // focused = false; // uncomment this line to prevent auto-accepting changes
    // make sure we restore original values
    // $(':focus').blur();   <-- **** comment out this line! ****
    return;
};