Keep the dcc.Dropdown (multi = True) OPEN, when choosing a value from options

Dash Python
1

Hey everyone!

I have an app with a dcc.Dropdown. It is a multi choice dropdown (multi = True) and I need the dropdown to stay open when a value from the options is chosen.

I have been looking into different ways to do that - some of the most popular ones were ones where you combine different components to look like a dropdown, but for example they are a combo of a dcc.Checklist, html.Summary, etc. as shown below. I suppose that could work, but seems very complex for just a simple functionality that I would like from a dropdown.

I have also found that this could be done using JavaScript (I used chatGPT to generate code for me that would do that) - but I was not able to make that work - for some reason the .js file is not recognized properly. I tried creating a .js file in the repository but could not get that to work either, after doing a bit of research, some of the posts even mentioned that it is not possible to run a javascript file in Dash.

I am clueless at this point how to get this to work and it is a crucial functionality in my app. Anyone knows how to make that happen?

Thanks!

2

Hi @martin.vlacil have you seen the documentation concerning using custom JS?

3

Yes, I managed to connect the javascript file now, but I am having trouble identifying any component. Though it does not give too many specific examples on how such javascript file could look like when it works with components.

I am trying to use document.getElementById to store the component in a var, but it always return null. I have also tried to wrap this whole function in a window.onload to make sure that it gets run after the page has loaded but it always return null. I have read that since Dash uses React, it has its own way to wait for the page to be loaded but could not find a way to do so yet.