I have the following components:
- Multiselect listbox (
sensors
)
- Select dropdown (
lotNumbers
) that filters sensors
(ie. sensors.searchTerm = lotNumbers.value
)
- A 'Select All' button that selects all rows in
sensors
that matches lotNumbers.value
.
This is the button's Click event handler:
(Please ignore the red text/code - I edited the components' names for simplicity)
These are the event handlers for sensors
- these are basically just setting values for variables for other components in subsequent forms:
The problem: these handlers aren't firing when I click the Select All button, even though the button is working as intended and is selecting filtered rows in the listbox (thus changing its values.) They are firing if I manually change values in the listbox, though.
Hello @lazymaplekoi!
Interesting bug find. I was able to replicate it, even with a few different options for changing a multi-select listbox component, none of them were able to trigger the Event Handlers for a Change event. Super weird
Will be reporting this to our engineering team to check on!
In the meantime, I might have a work around to suggest that could emulate the behavior you are looking to achieve.
This process would be:
Button click -> JS Query block (this is where you can run the filtering logic to get an array of filtered values which you want to display in the multi-select) ->
In the JS Query block you can use myMultiselect.setValue([filtered, arr, vals, here]) to update the values shown as selected in the component->
Then in the JS query's 'On Success', run the three "event handler" actions you have currently set to run on Change, that you have in your second screen shot!