Question:
How do I close a select element located within a collection when an option has been chosen?
Setup:
I have 2 select elements being presented for each item in a collection, created from an Array. A “State” select and a “Geographic Area” select. The State select drives the options available within the Geographic Area select. When a new State is chosen, I reset the Initial Value of the Geographic Area select element. I accomplished this by creating a “geoAreaInputValue” variable for each item in the collection, binding it to the initial value of the Geographic Area select element, and resetting the value to “” (empty) when a new state is chosen.
I had to use the “geoAreaInputValue” to perform the reset because there is no unique “Select Input Variable” available to reset the component when it is contained in a collection.
Problem:
Because the Initial State of the Geographic Area select is bound to the “geoAreaInputValue” variable, when a Geographic Area option is selected, the dropdown containing the Geographic Area options does not close. The Select Item component isn’t granular enough that I have control of the conditional rendering of the dropdown + options.
Is there any way to close the dropdown when a new item has been selected?
Or, is there any way of resetting a Select Input Element when it is in a collection and not having to use the Initial Value of the element?
Normally, the element should close automatically if the ‘close on select’ option is activated. However, it’s possible that, depending on your element’s configuration and options, this default behavior might be overridden.
If ‘close on select’ doesn’t work, there’s a technique you can use to force the element to remount. You can find the instructions on this page: How to Reset a Dropdown Element.
In your case, the idea is to trigger this workflow immediately after changing the value of your select.
Thanks @Kevin and @Joyce. The “close on select” is activated for the select element. I believe it has something to do with that fact that the select element is within in a collection. And that I have to reset the Geographic Area when the State changes using the “Initial Value” of the Geographic Area. I just null it out.
Because the select element is componentized and obscured, I am not able to “tell” the Geographic Area dropdown to close when a list item has been selected. Or else I would just create a workflow off the the list items.
