Collapse multiselect Dropdown

App Building
,
1

I want the dropdown to collapse as soon as i select one value in multiselect. When a value is selected the dropdown persists and only goes away when you click outside it or on the arrow.
But what I want to close it as soon as one value is selected. Is there a way to do that. Please help

2

Hey @HamzaK99,

doesn't that defy the functionality of the mutliselect? :stuck_out_tongue: Not sure what your use-case is but you can hack your way around it by focusing on another input.

  • Create another select input, make it as small as possible and put it at the very bottom of the page. Set hidden to true.
  • Add a change event handler on your multiselect and run a script
select.setHidden(false)
select.focus()
select.setHidden(true)

You need to unhide the component to be able to focus it

Very hacky but works.

1 Like
3

It was a really innovative approach. I did that but whenever i change the page scrolls down to where that hidden component is. So it's bad for user experience.

4

But I did use your hack to make a workaround. I changed every color used in that component with the background color of my page and i kept it next to main input :sweat_smile:. so even if it's focused for fraction of seconds it's not detected

5

Aah nice :)) Glad it worked out in the end.