DatatablesBundle icon indicating copy to clipboard operation
DatatablesBundle copied to clipboard

[IMP] filtering: Prevent duplicate search triggered on text input change

Open emullaraj opened this issue 6 years ago • 4 comments

This is a low priority old bug that I was trying to track down when having a little bit of time where a second search is triggered after filtering one column and hitting an action button/link. This is mainly caused by the change event on the input, which makes the evaluation after the input loses the focus (user click the action link). The user is forced to click the action once again as the datatable reloads the same results as the previous search.

Use case to reproduce the issue:

  • datatable with text input individual filtering
  • action links on each row
  • user filters one column by writing some text in the text input > search is triggered
  • the filtered result shows up successfully
  • user clicks on the action link from one of the filtered rows
  • another search is triggered, same as the last one, from the "change" event behaviour which on text inputs runs after the input loses focus and the value has changed

Fix search.js.twig Before: $(selector + '-filterrow').find("input.sg-datatables-individual-filtering").on("keyup change", search); After: $(selector + '-filterrow').find("input.sg-datatables-individual-filtering").on("keyup input", search);

By switching the "change" event with the "input" event, mobile users would also experience the same behaviour as desktop users where search trigger will be evaluated after each button click on the virtual keyboard.

emullaraj avatar Sep 21 '19 20:09 emullaraj

Is it necessary to keep keyup event if you add input event?

Seb33300 avatar Sep 21 '19 20:09 Seb33300

@Seb33300 I see your point. I tested the results without the keyup event and I found no difference. I should also mention that my knowledge on this matter is limited, so I would suggest we find a second opinion here.

Mozilla says this about input

The input event fires when the value of an <input>, <select>, or <textarea> element has been changed. link

Whereas the keyup is described as

The keyup event is fired when a key is released. link

So there is a difference. :)

Is there any case when removing keyup will change the current Datatable search/filter behavior?

emullaraj avatar Sep 21 '19 21:09 emullaraj

Of course there is a difference, but I think we should trigger the search only if search value changed.

Triggering search when pressing buttons like arrows, pg up/down, etc... is useless

Seb33300 avatar Sep 26 '19 03:09 Seb33300

Of course there is a difference, but I think we should trigger the search only if search value changed.

Updated PR

emullaraj avatar Sep 28 '19 20:09 emullaraj