Input type search clear button Microsoft Edge not working properly with Datatables

Question

I am using Datatables to sort and filter my tables. When you activate Datatables, there is a search field. In Chrome, Firefox, Edge and Internet Explorer 11 there is a clear button present with every search input field.

When you click on it, the text is cleared and the table will reset. Except in Microsoft Edge, this does not work. The table is not resetting.

Is this an issue with Microsoft Edge or Datatables?

If you have implemented a steady, working solution for DataTables filter input I think you should post it as answer here and accept it. Will happily upvote such answer, it is needed. — davidkonrad
As one of the answers indicates... This is an Edge bug. Please poke Microsoft about this issue. developer.microsoft.com/en-us/microsoft-edge/platform/issues/… — AnthonyVO

davidkonrad davidkonrad · Accepted Answer · 2018-09-02T12:30:26

I believe it is Edge that not is triggering the events the DT input is listening on. That is keyup, keydown, keypress, cut and paste ...There is two additional events that is fired when you click on the search input clear button: mousedown and mouseup.

You could create event handler that force a redraw when mouseup is triggered :

$('.dataTables_filter input').on('mouseup', function() {
  table.draw()
})

See this question where the issue is discussed more thoroughly -> Event fired when clearing text input on IE10 with clear icon

Input type search clear button Microsoft Edge not working properly with Datatables

3 Answers