search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.32k stars 4.12k forks source link

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

Open symbiotisk opened 1 month ago

symbiotisk commented 1 month ago

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.

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

jhmonroe commented 1 month ago

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 commented 3 hours ago

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 commented 3 hours ago

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