'Select All' button that changes multiselect listbox values not firing listbox's Change event handlers

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:
image

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 :space_invader:

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!