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

stwe / DatatablesBundle

This Bundle integrates the jQuery DataTables plugin into your Symfony application.

355 stars 236 forks source link

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

Open emullaraj opened 5 years ago

emullaraj commented 5 years ago

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.

Seb33300 commented 5 years ago

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

emullaraj commented 5 years ago

@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?

Seb33300 commented 5 years ago

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

emullaraj commented 5 years ago

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

Updated PR