Navigation Sub Menu: Clicking outside the popover glitches it to remain open, further clicking doesn't result in anything

[yogeshbhutkar]

Description

When the add more sub-menu items popover is enabled, if there's a paragraph element below it, then clicking specifically at the bottom of the editor area closes the sub-menu whilst keeping the popover open. Making further clicks at the bottom of the editor seems to not close the popover.

These two conditions are necessary to replicate this:

1. Make sure there's some block below the Navigation Menu (Like the paragraph block).
2. To close the popover, click at the bottom area of the Editor as shown in the below screencast. Clicking on the same level or above works as expected.

Step-by-step reproduction instructions

1. Insert Navigation Menu block.
2. Make sure that there's an empty paragraph below it.
3. Create a Sub menu inside the Navigation Block.
4. Try clicking the + button to add more sub-menu items.
5. Try closing the popover by precisely clicking at the bottom of the editor.
6. Notice, that the Sub menu got closed, but the popover remains open. Further clicking exclusively at the bottom area of the editor does not seem to close the popover.

Screenshots, screen recording, code snippet

Screen.Recording.2024-12-24.at.12.26.17.PM.mov

Environment info

• WordPress Version: 6.8-alpha-59361
• Gutenberg Plugin: 19.9.0
• OS: Mac OS Sequoia (15.2)

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[himanshupathak95]

Hey @yogeshbhutkar, Thanks for bringing this up. I observed a similar behavior -

Screen.Recording.2024-12-24.at.13.11.14.mov

However, this only happens when there are blocks after the nav menu block. As I demonstrate, without any trailing blocks, the popover behaves fine.

[Mayank-Tripathi32]

Hey @yogeshbhutkar, Thanks for bringing this up. I observed a similar behavior -

Screen.Recording.2024-12-24.at.13.11.14.mov
However, this only happens when there are blocks after the nav menu block. As I demonstrate, without any trailing blocks, the popover behaves fine.

I believe the disappearing behavior, when there are no trailing blocks, is primarily due to a focus shift that occurs when the block inserter is added, and is probably irrelevant to the issue. I will investigate if this is regression issue first.

Update: Seems to related to insert block preventing the event from bubbling to popover component.