Open eugesma opened 5 years ago
I think it's related to the automatic filtering. If after fill the field i press in other part of the sreen (unfocusing the filter form), the button to show the item works fine.
I'm seeing this as well.
We had this same problem. I believe it's because of the jQuery selector, which IS working correctly, but maybe not how you want it to.
My theory...
Context:
.filterrific-periodically-observed
on the events keyup, click, mousemove
change
event handler to all Filterrific filter inputsFilterrific.submitFilterForm
which will refresh the data shownWhat I think the "double click" is:
change
on the input, triggers Filterrific.submitFilterForm
for the first timemouseout
or maybe change
(?)Filterrific.submitFilterForm
for a second time.You can verify this by adding some debugging step when the table is refreshed (i.e. a binding.pry
for backend or a js debugger
for frontend)
To get around it: Don't let Filterrific handle input changes!
Solution: I added a custom ID on the filterrific table
-# Custom ID for custom event handling
= form_for_filterrific @filterrific, {html: {id: 'filterific_filter_custom'}} do |f|
and overwrote how to bind to elements.
In our case, we wanted a submit button, so I added a Submit button (in the form! you can use CSS to hide it if you want..)
#submit.btn.btn-green{:role => "submit"} Search
To handle hitting Filterrific's function submitFilterForm
, because that function requires some element to inherit the form from (the Submit button in this case).
So in the JS, on the page ready, copy similar functionality binding to the form
var overrideBindings = function(){
# On submission, let filterrific do the heavy lifting, this stays the same as default functionality
$('#filterific_filter_custom #submit').click(Filterrific.submitFilterForm)
# Intercept "Enter" key to avoid the rest of the form from being wiped.
$('#filterific_filter_custom').submit( (e) -> e.preventDefault(); $('#filterific_filter_custom #submit').click())
}
If this was a better solution, I'd PR it...
@cartond thanks for the patch suggestion -- just wanted to see if anyone else has come up with any ideas for preventing this double firing?
For reference: https://github.com/jhund/filterrific/issues/84 and https://github.com/jhund/filterrific/issues/139
I used this and it seems to work perfectly (from https://github.com/jhund/filterrific/issues/84):
$('#filterrific_filter').on( "change", ":input", function (e) { e.stopImmediatePropagation(); $(this).off("blur"); Filterrific.submitFilterForm; } );
After filter the table, the buttons needs to be clicked twice times to work. In application.js:
I dont know what happen....