Navigation Block mobile menu modal doesn't close

[robrobsn]

Description

The mobile menu modal doesn't stay closed after clicking the close icon when the hamburger menu icon is directly underneath the modal's close icon.

AFAICT, the reason is that the modal closes on touchstart which exposes the hamburger menu icon underneath and the touchend when releasing the mouse button triggers a click on the hamburger menu icon which then opens the menu again.

A local fix of adding preventDefault to the touchstart event before calling closeModal in the onClick method fixes the issue.

if( e.type === 'touchstart' && e.target.hasAttribute( this.config.closeTrigger ) ) {
  e.preventDefault()
}

Alternatively, change triggering the onClick method from touchstart event to a click event instead.

Hope that helps!

Step-by-step reproduction instructions

1. Activate a FSE theme
2. Open the Site Editor and add the navigation block to the index template or header template part
3. Make sure the Enable responsive menu option is selected and a menu with menu items is selected
4. Save the template or template part
5. Switch to the frontend of the site
6. Activate Device emulator in the developer tools and pick a mobile device
7. Make sure a device is picked that triggers the display of the hamburger menu
8. Open the menu modal by clicking the hamburger menu icon and make sure the close icon is directly over the hamburger menu icon
9. Click the close icon
10. Observe that the menu modal will be re-opened immediately after releasing the mouse button
11. Open the menu again
12. Now press the menu button when hovering the close icon
13. Keep the mouse button pressed
14. The menu modal should be closed and expose the hamburger menu icon
15. Move the mouse away from the hamburger menu icon and release the mouse button
16. Observe that the menu does not re-open

Screenshots, screen recording, code snippet

The first two clicks on the close icon show the issue as described above in steps 9-10. The two clicks after show steps 12-16.

Environment info

WordPress 5.8.1
Gutenberg 11.7

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

[bgoewert]

I was also running into issues with this on a company theme I was working on. Found that this is due to the MicroModal package using touchstart. There is an open issue for this in the MicroModal repo suggesting to call preventDefault on touchstart events. ghosh/Micromodal#477

[bgoewert]

Created a PR (ghosh/Micromodal#479) that fixes ghosh/Micromodal#477

Also attempted to contact one of the maintainers of the project. Since it is a dependency, what happens if that package does not get updated? The last commit on the master was Mar 26, 2020.

[leeshadle]

I also ran into the same issue...

[bgoewert]

A fix has been merged in Micromodal v0.4.7
ghosh/Micromodal#479

[bgoewert]

This issue seems to have been a duplicate of #31957.
#36837 updated the Micromodel version which fixed this issue.

For whatever reason it still seems to be an issue for me testing on Edge at work with a brand new env. That may just be me though.

[annezazu]

I'm going to close this out as I can't replicate with WordPress 5.9, TT2, and Gutenberg 12.5.3:

clos.modal.mov

Thank you @bgoewert for jumping in with a PR above 🥳 If anyone else can replicate still, please just comment here and I'll re-open.