Navigation Block: Menu close button doesn't work on mobile

[ryelle]

Description

When using a touch device (like a phone), the mobile menu close button doesn't close. It appears to trigger twice, so the menu closes and immediately re-opens.

I was able to reproduce this on the new wp.org News theme and the Twenty Twenty-Two demo, both use the navigation block.

Step-by-step reproduction instructions

1. Go to either site listed above or a local site with a Navigation block
2. Use a touch device, or switch to touch simulator on your browser
3. Open the menu
4. Try to close it

Screenshots, screen recording, code snippet

menu-close.mp4

Environment info

No response

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

Yes

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

No

[chthonic-ds]

I believe #36837 was supposed to address the underlying cause of this behaviour.

[ryelle]

It looks like that was released with v12.2 of Gutenberg, but I'm still able to replicate this on WP trunk + Gutenberg 12.3.2.

[carolinan]

I can reproduce this using an android phone, with other themes than TT2, on Gutenberg 12.3.2 WordPress 5.9-RC2-52579 multisite.

[getdave]

I tested on the iOS simulator on 5.9-RC2-52579 both with and without Gutenberg 12.3.2 active on the TT1 theme and I was unable to replicate:

Screen.Capture.on.2022-01-17.at.14-34-20.mov

Also same for TT2 theme:

Screen.Capture.on.2022-01-17.at.14-35-22.mov

I'll see if I can try this on an Android somehow.

I was able to reproduce this on the new wp.org News theme and the Twenty Twenty-Two demo.

[ryelle]

My screen recording was using an Android, so maybe this isn't an issue on iOS?

Continuing to debug, I can reproduce this on WordPress 5.9-beta2-52353 + Gutenberg trunk using Twenty Twenty-Two, with Firefox responsive mode + touch simulation enabled.

It looks like navigationToggleModal is called twice for the close button, once with a click event and once with a touchstart event.

Edit: The touchstart is on the close button, but the click is on the open button.

[ryelle]

It looks like micromodal had a regression (see ghosh/Micromodal#488) which caused the issue in #36837 to reappear. I had version 0.4.9 of micromodal, updated locally to 0.4.10, and that seems to have fixed the issue again.

[ryelle]

PR to update micromodal version: #38032

[hellofromtonya]

Hey folks, PR #38032 was backported to Core for RC3 https://core.trac.wordpress.org/changeset/52598. Thank you everyone for contributing to fixing this issue 🎉