I have a multiselect component that I am using to apply a filter to a table. I am currently using a Blur event handler to update the table when the multiselect is defocused, this is working as expected.
My trouble comes when a user clicks the small x to remove an option in the multiselect, obviously this is not a defocus event and my event handler is not fired.
I have changed to using a Change event handler, however this means each time also use the dropdown and I select a option in the filter (or deselect) this event is fired.
I have been unable to find a way to know what has triggered my event handler so I can only update when required?
I would love at least an option to hide this x there is no option I can see!
I'd suggest a slightly different approach to filter your table.
If you add a multiselect compont to your application and filter the data of your table based on the selected values, the table will only rerender when the selected values change. No change handler required!
Thank you @avr@Milan_Kalem
I forgot to mention in my original post that I am doing server-side filtering and pagination for my table.
I am populating my filter multiselect with a REST query.
I am also populating my table with a different REST query. When I make my selection in my filter multiselect, I add these keys into the query that populate sthe table. I then run the query from my multiselect blur action that populates the table.
For this reason I cant use the normal table filtering
If you're doing server-side filtering, you can skip the change handler and hiding the x with some custom CSS.
Just reference your multiselect values directly in your resource query. Then, set your query to Run automatically. This way, it only fires off when the selected values change, not just when you open and close the dropdown.
