Hi everyone!
I try to create a Dropdown Menu (via Bootstrap) with a Checklist in it. If I do it with dash-bootstrap-components (like in bootstrap itself), the dropdown hides automatically when anything inside it is clicked.
The target is to have it closed only by some other button click.
The “toggle” option set to “False” doesn’t help.
As I understand it’s only possible to cancel such an action with external JS code added to the dropdown menu element, for example:
$(document).on(‘click’, ‘.noclose’, function (e) {
e.stopPropagation();
});
Iw works for raw html + bootstrap code.
However, when I add such a script to the “assets” folder, it seems to get overwritten by Dash Renderer (not sure how that works…) because finally the event on click is set to “noop”:
Can anyone help with this? Is it possible to solve that issue?
Many thanks!
It looks like there’s a bug in the toggle property of DropdownMenuItem. I’ve raise this issue and will look into a fix.
Thanks a lot! Hope this can be solved soon 
Hi! Is there a fix already? How can I implement it once it’s done?
Hey, sorry for not following up on this. I’ve merged a fix and am hoping to make a new release next week. In the meantime you can install one of the pre-releases that I’ve been using for testing
pip install dash-bootstrap-components==0.12.1a4
Then you just need to set toggle=False on each DropdownMenuItem.
Thanks a lot Tom! Now that’s working just perfectly
1 Like
Hello, is there way that if we click outside of dropdown menu, it will not hide it?
Hey there! Didn’t try it with a dropdown menu, but check a “Backdrop” property of a “Modal” Bootstrap component, maybe it can be done similarly:
https://dash-bootstrap-components.opensource.faculty.ai/docs/components/modal/
Thanks for response, but there is not property like this.