Freezing dropdown menu and other popup windows for inspection in browser developer tools

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:

  1. Select the dash-dropdown component in the Elements tree
  2. Go to the Event Listeners tab in the Styles window that opens
  3. Unfold the Blur (or focusout as alternative) event listener and click the remove button to delete it.
  4. 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!

2 Likes

@Tobs - This is such a great tip - Thanks for sharing :tada:

1 Like