Ever been annoyed not being able to inspect parts of your dash apps Elements tree through the developer tools in your browser? I have when trying to understand the CSS styling of a dropdown menu.
Take for example the following dcc.Dropdown, when the menu is open, the Elements tree shows the Select-menu-outer div. To inspect it, you would click the div in the tree. However, the menu disappears and so does the div element, not allowing you to inspect it.
Luckily, you can stop the behavior that the dropdown menu disappears, as explained in this stackoverflow post.
The steps are quite easy:
- Select the
dash-dropdowncomponent in the Elements tree - Go to the
Event Listenerstab in the Styles window that opens - Unfold the
Blur(orfocusoutas alternative) event listener and click the remove button to delete it. - The dropdown menu will now stay open when clicking the element in the Elements tree
I hope this small tip helps save you some frustration!
