Interactivity API Navigation block in the header - Mobile modal closes when clicking anywhere except the modal in Firefox and Chrome

[symbiotisk]

Description

Recently we've noticed that the Interactivity API closes the mobile modal when clicking anywhere on the screen except inside the modal. This prevents several things when working on the front-ends of our sites.

We work primarily using Firefox for development, and the bug seems to be here and in the latest version of Chrome.

Issue:
You cannot inspect the modal or items in it. Since the Interactivity API removes the has-modal-open class on the html element.

Step-by-step reproduction instructions

1. Go to https://2024.wordpress.net/ and open your web inspector
2. Set your browser width to a breakpoint where the menu button appears
3. Inspect a menu-item
4. The modal closes (the class "has-modal-open" gets removed from the html element

Screenshots, screen recording, code snippet

Check out an inspection of the modal in Firefox looking at the 2024 Theme.
https://github.com/user-attachments/assets/908f23b5-52c9-4a0c-9e66-9f1b670494e1

Environment info

WordPress 6.6.1
Firefox 128.0.2, Chrome 119.0.6045.105
Mac OS 14.5
Gutenberg install - unknown

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

[jhmonroe]

Somewhat related to what you're seeing... I also seem to have persistent issues with the native WP Core mobile menu not opening on tap on Chrome for iOS. Works totally fine in Safari and Firefox on iOS. Clearing caches never solves it.

I'm wondering if it has something to do with the order in the DOM that the Interactivity API or JS loads relative to when the CSS breakpoints load. And perhaps Chrome is more picky about this and Firefox/Safari let it slide.

This hunch came to me because I was toggling the responsive mode in Chrome MacOS Desktop version and doing different combinations of resizing the window and refreshing the page, and was at one point able to get the mobile menu to break on simulated responsive mode on desktop too.

The site in question: https://mmonroedesign.com/

[unprintedch]

Hey
Any news on that?
It makes trying to extend the navigation block pretty hard... And this one need improvement!

Is there anyway to help?

[unprintedch]

Int the view there is this cmment:
// This is a fix for Safari in iOS/iPadOS. Without it, Safari doesn't focus out
// when the user taps in the body. It can be removed once we add an overlay to
// capture the clicks, instead of relying on the focusout event.

And in fact you can interact with the inspector using safari, and only safari.

Hope it helps

[michalczaplinski]

Hi all! Thanks for reporting the issue. I'm going to close it as a duplicate of #57603