Multi-select dropdown that doesn't run callback until all choices selected?

Dash Python
1

I have a dash app with a dropdown component using the multi-select option. Currently when a user is selecting multiple items, the dropdown list closes and its callback runs after each individual selection. So if you’re planning to pick many items, you have to re-click the dropdown menu and potentially scroll to your next item many times. Not a great user experience. Is is possible to configure a dropdown to allow you to select all the items you want before it closes and its callback fires? i.e., having the dropdown be a list of checkboxes and then it closes and fires the callback once you click away from the dropdown list?

I suspect the answer is no but just thought I would ask. If my desired behavior is not possible, is there another Dash component that can accomplish a similar thing?

Thanks!
Justin

2

Hi @jbs3629

I don’t think that feature is available in the dcc.Dropdown.

However, check out @snehilvj’s dash-mantine-components

See the online docs for multi-select dropdowns . This is a great feature! :confetti_ball:

2 Likes
3

Thanks for the shout out @AnnMarieW
@jbs3629 just one thing here, in dash mantine components, though the dropdown doesn’t close after every selection, the callback is triggered.

1 Like
4

@snehilvj Would it be possible to add a dropdown_closed prop based on the onDropdownClose? It would be great for this use-case

5

Alright, noting it down.
Edit: Created Allow Multiselect to trigger callbacks on dropdown close. · Issue #34 · snehilvj/dash-mantine-components · GitHub

1 Like
6

Thank you @AnnMarieW. This looks promising. I’ll check it out.

7

Thanks @snehilvj. This looks like a very nice package of components. I’ll check it out. Understood about the callback firing after each selection.

1 Like