Navigation Block: overlay menu closes automatically when hovering menu items linked to drafts that follow a submenu item

[liviopv]

Description

Edge case: When a site has a draft page linked to a menu item and that menu item is positioned after a submenu in a Navigation Block, the overlay will automatically close without user input.

Step-by-step reproduction instructions

1. Add a Navigation Block with the following structure:

• Menu Item
• Menu Item
  ** Submenu item
  ** Submenu item
• Menu item with a post/page saved as a draft

2. Set the Navigation to display as an overlay
3. Check the frontend and over the menu item associated with the draft

Screenshots, screen recording, code snippet

CleanShot.2024-03-20.at.15.30.33.mp4

Example menu structure:

Environment info

• WordPress 6.5 RC3, GB 17.9
• Chrome 122, MacOS 14.0

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

[annezazu]

Finally had time and I can replicate with 6.5 RC3. This feels major @getdave @youknowriad @fabiankaegy You can replicate by spinning up a site here https://app.instawp.io/launch?t=beta-rc&d=v2 and setting the menu to display mobile always.

[youknowriad]

Were you able to check whether this is a new bug in 6.5 or something that pre-existed?

[colorful-tones]

I just tested on WP 6.4.3 base install and I was not able to recreate the issue. So, something new in 6.5. In 6.4.3 the draft item is not even displayed on the front end in the navigation, which seems ideal to me.

[ariel-maidana]

On a site with the Meraki theme, I found a case in which the link to the draft page is inside the submenu, not after it.

[youknowriad]

At this point in the release, it might have to be fixed in a patch release though.

[draganescu]

Does the draft render on the front end? We to my knowledge do not render links to draft posts.

[youknowriad]

I think the issue is more about the menu closing automatically rather than the draft displaying.

[draganescu]

But I can't repro because for me the draft links don't render. And in the editor the overlay does not close automatically.

[liviopv]

But I can't repro because for me the draft links don't render. And in the editor the overlay does not close automatically.

@draganescu The draft doesn't render for me either, as expected. The problem happens when the cursor reaches the draft item position, as shown in the video.

[draganescu]

Ohh 😂 I didn't see that in the video! I'll try again 🙇🏻

[draganescu]

@liviopv what am I not doing?

draft-doesnt-close.mp4

[liviopv]

@draganescu before the draft item, you need to have a menu item with a submenu, like this structure:

Menu Item

Menu Item

Submenu item
Submenu item

Draft

[draganescu]

and that menu item is positioned after a submenu in a Navigation Block

Apparently I flopped reading comprehension today :D will test again!

[draganescu]

Yes I can confirm this.

[draganescu]

The problem manifests for any submenu - the presence of a draft link is not required - and it is happening because there is some bad interference between the code that closes submenus and the code that closes the overlay.

[draganescu]

@liviopv if you can test #60130 let me know if it fixes the problem for you.

[annezazu]

I really hope we can fix this before the release goes out. I tested the above and it fixed it for me but would appreciate a lot more reviews. I'll flag in Make Test :) cc @fabiankaegy @colorful-tones in case you all can help out too.

[kjnanda]

@annezazu I tested out the PR and the added fix works as expected. 👍🏻

---

Test Report

Description

This report validates whether the indicated PR works as expected.

PR : Fix self closing navigation overlay
PR Link - #60130

Environment

• WordPress: 6.4.3
• PHP: 8.3.0-dev
• Server: PHP.wasm
• Database: WP_SQLite_Translator (Server: 5.5 / Client: 3.40.1)
• Browser: Chrome 123.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Four 1.0
• MU Plugins:
  • 0-playground.php
  • 0-sqlite.php
  • WordPress WXZ Exporter 0.1
• Plugins:
  • Gutenberg 18.0.0-rc.1
  • Test Reports 1.1.0
  • WordPress Importer Git loader 0.8.2

Actual Results

1. ✅ Issue resolved with this given PR.

Additional Note

Tested with WordPress Playground

Supplemental Artifacts

Add as Attachment

---

Please check this visual attached below.

Fix.self.closing.navigation.overlay.mov