Developer Tools inspector wp-block-navigation__responsive-dialog closes on inspection

[djcowan]

Code issue Line number isreference only.

gutenberg/packages/block-library/src/navigation/edit/responsive-wrapper.js

Line 70 in f927f2d

className: 'wp-block-navigation__responsive-dialog',

1. Responsive dialogue closes when Inspecting website using development inspector tools
2. elements and styles including computed syles unable to be accessed or viewed for open dialog
   2.1 modal closes immediately upon inspection or any window activity (windows 10)
   nb. time delayed screenshot of interactivity elements was the only way for me to capture a reference to the issue
   

Inspector.-.Google.Chrome.2023-11-14.11-32-37.-.Trim.mp4

[Mamaduka]

This isn't a bug with dialog; it is just how most popups behave - they close on focus outside. In the current case, they'll close when the focus is moved outside to the DevTools.

You can use Chrome's "Emulate Focus Page" feature when inspecting/debugging similar elements. Here's a quick intro video for it: https://www.youtube.com/watch?v=OZTnxUCMiJU. Remember to turn it off after inspecting the elements.

[bradhogan]

@Mamaduka Not sure how related this is by my ticket #57603 is showing that the console closes if the mobile menu is open and you try to click into any of the elements to inspect / adjust / etc. The menu closes when clicking into the dev console which it should not (this is a bug). For example, view https://www.notion.so/help in chrome > mobile device > click the hamburger to open the menu > then select an element in that menu to inspect and click into the dev console to do change an element etc. Notice the open mobile menu does close. This is how it should behave. Otherwise the dev console is useless.