FixedHeader with per-column search does not work in IE11

krick

I've taken the example here...

Individual column searching (text inputs)
https://datatables.net/examples/api/multi_filter.html

...and added a FixedHeader and moved the search footer row into the head...

https://jsfiddle.net/wkrick/jpu95hL8/

Filtering the columns using the search boxes works as expected in Chrome and Firefox, but doesn't work at all in IE11.

In IE11, you can only type one character then it won't let you type anymore, even though the field still has focus.

If you click in one of the other search boxes after this happens, then you can edit the placeholder text, which shouldn't be possible.

For people who can't use the JSFiddle version for whatever reason, here's a link to a live page...

http://files.3feetunder.com/datatable_test.html

DataTables debugger code for the above page: emazic

krick

I don't know what is causing the bug, but I think I found a workaround. Adding...

$(this).blur().focus();

...after the search/draw appears to fix IE11.

// Apply the search
table.columns().every( function () {
    var that = this;

    $( 'input', this.footer() ).on( 'keyup change', function () {
        if ( that.search() !== this.value ) {
            that
                .search( this.value )
                .draw();
            $(this).blur().focus();
        }
    } );
} );

krick

Sadly, the workaround above seems to only work intermittently in the Microsoft Edge browser. Sometimes it works perfectly, other times, the cursor jumps around as you type and the letters are out of order.