Navigation block: fix submenu chevron toggle on touch devices#76197
Merged
Navigation block: fix submenu chevron toggle on touch devices#76197
Conversation
|
Size Change: +148 B (0%) Total Size: 6.89 MB
ℹ️ View Unchanged
|
scruffian
approved these changes
Mar 5, 2026
Contributor
scruffian
left a comment
There was a problem hiding this comment.
Touch Device + Hover Submenus ✅
Touch Device + Click Submenus ✅
Hover Device + Hover Submenus ✅
Hover Device + Click Submenus ✅
I would suggest we add tests so this doesn't happen again.
Contributor
|
Actually one small thing, on hover devices, when the submenu is set to click the alignment is slightly off: |
Contributor
Author
But is that this PR? |
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Contributor
Good point, no it isn't so 🚢 ! |
|
Flaky tests detected in 751f987. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/22855875009
|
2792c7d to
1190110
Compare
mikachan
approved these changes
Mar 5, 2026
Member
mikachan
left a comment
There was a problem hiding this comment.
Code changes look good to me, and this is testing as described:
- Desktop: hover → submenu opens; move away → submenu closes; click → submenu toggles ✅
- Touch device: tap → submenu opens; tap again → submenu closes; tap again → opens ✅
- Keyboard: Tab into item → submenu opens via focus; Tab away → closes ✅
I tested with each visibility option: Hover, Click, and Always ✅
On touch devices, mouseenter fired before the click event causing the hover state flag to get stuck open and the submenu to never close on a second tap. Switch to pointerenter/pointerleave directives and guard both hover actions against touch pointerType to prevent the conflict. Also wrap the CSS :hover submenu rule in @media (hover: hover) to prevent sticky touch-hover on mobile browsers.
When toggleMenuOnClick closes the submenu, also call closeMenu('hover')
so any hover state set by a synthetic pointerenter (e.g. the
browser-generated pointer event that fires before click on touch) is
cleared. Without this, the submenu remains open on the second tap because
hover=true is never reset.
Add three tests covering the touch toggle fix: - submenu does not open via hover on touch devices (pointerenter guard) - chevron opens and closes submenu on touch devices (toggle fix) - submenu still opens via hover on non-touch devices (no regression) Tests dispatch pointerenter with explicit pointerType to accurately exercise the touch/mouse guards rather than relying on mouseenter.
1190110 to
751f987
Compare
gutenbergplugin
pushed a commit
that referenced
this pull request
Mar 9, 2026
* fix(navigation): fix submenu touch toggle by guarding pointer events On touch devices, mouseenter fired before the click event causing the hover state flag to get stuck open and the submenu to never close on a second tap. Switch to pointerenter/pointerleave directives and guard both hover actions against touch pointerType to prevent the conflict. Also wrap the CSS :hover submenu rule in @media (hover: hover) to prevent sticky touch-hover on mobile browsers. * fix(navigation): also clear hover state when chevron is clicked to close When toggleMenuOnClick closes the submenu, also call closeMenu('hover') so any hover state set by a synthetic pointerenter (e.g. the browser-generated pointer event that fires before click on touch) is cleared. Without this, the submenu remains open on the second tap because hover=true is never reset. * test(navigation): add e2e tests for submenu touch device interactions Add three tests covering the touch toggle fix: - submenu does not open via hover on touch devices (pointerenter guard) - chevron opens and closes submenu on touch devices (toggle fix) - submenu still opens via hover on non-touch devices (no regression) Tests dispatch pointerenter with explicit pointerType to accurately exercise the touch/mouse guards rather than relying on mouseenter. Co-authored-by: getdave <get_dave@git.wordpress.org> Co-authored-by: scruffian <scruffian@git.wordpress.org> Co-authored-by: mikachan <mikachan@git.wordpress.org>
|
I just cherry-picked this PR to the wp/7.0 branch to get it included in the next release: 7b7fa2b |
pento
pushed a commit
to WordPress/wordpress-develop
that referenced
this pull request
Mar 9, 2026
This updates the pinned hash from the `gutenberg` from `f4d8a5803aa2fbe26e7d9af4d17e80a622b7bab8` to `7b7fa2bc97a8029a302bd6511cf0d206b5953172`. The following changes are included: - Sort registry files by handle/ID. (WordPress/gutenberg#75755) - Obey undoIgnore flag in editEntityRecord (WordPress/gutenberg#76206) - RTC: Fix `post-editor-template-mode` E2E test (WordPress/gutenberg#76209) - Publish built Gutenberg plugin to the GitHub Container Registry (WordPress/gutenberg#75844) (WordPress/gutenberg#76273) - Connectors: Improve placeholder text and make it translatable (WordPress/gutenberg#75996) - Block context menu: context menu not closing for disconnecting unsynced pattern menu items (WordPress/gutenberg#75405) - Connectors: Improve responsive layout for small viewports (WordPress/gutenberg#76231) - theme.json schema: fix pseudo-class definition for button block (WordPress/gutenberg#76272) - Navigation block: fix submenu chevron toggle on touch devices (WordPress/gutenberg#76197) See #64595, #64393. git-svn-id: https://develop.svn.wordpress.org/trunk@61868 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith
pushed a commit
to markjaquith/WordPress
that referenced
this pull request
Mar 9, 2026
This updates the pinned hash from the `gutenberg` from `f4d8a5803aa2fbe26e7d9af4d17e80a622b7bab8` to `7b7fa2bc97a8029a302bd6511cf0d206b5953172`. The following changes are included: - Sort registry files by handle/ID. (WordPress/gutenberg#75755) - Obey undoIgnore flag in editEntityRecord (WordPress/gutenberg#76206) - RTC: Fix `post-editor-template-mode` E2E test (WordPress/gutenberg#76209) - Publish built Gutenberg plugin to the GitHub Container Registry (WordPress/gutenberg#75844) (WordPress/gutenberg#76273) - Connectors: Improve placeholder text and make it translatable (WordPress/gutenberg#75996) - Block context menu: context menu not closing for disconnecting unsynced pattern menu items (WordPress/gutenberg#75405) - Connectors: Improve responsive layout for small viewports (WordPress/gutenberg#76231) - theme.json schema: fix pseudo-class definition for button block (WordPress/gutenberg#76272) - Navigation block: fix submenu chevron toggle on touch devices (WordPress/gutenberg#76197) See #64595, #64393. Built from https://develop.svn.wordpress.org/trunk@61868 git-svn-id: http://core.svn.wordpress.org/trunk@61155 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Fixes #75965
When a Navigation block uses the "hover" submenu visibility setting, tapping the chevron on a touch device opens the submenu correctly but a second tap fails to close it.
Why
Two interacting bugs caused this:
JS state conflict (primary): On touch, browsers fire
pointerenteron the<li>before theclickevent on the chevron<button>. This leftsubmenuOpenedBy.hover = trueafter tap 1, so tap 2'stoggleMenuOnClickcalledcloseMenu('click')but nevercloseMenu('hover')— keeping the submenu open indefinitely, becausemouseleavenever fires on touch.Sticky CSS
:hover(secondary): Many mobile browsers keep:hoveractive after a tap, so the submenu appeared open via CSS even when JS state considered it closed.How
index.php— Swapdata-wp-on--mouseenter/mouseleavefordata-wp-on--pointerenter/pointerleave. The Pointer Events API exposes apointerTypeproperty ("mouse","touch","pen") that the JS actions can guard on.view.js— Add aneventparameter toopenMenuOnHoverandcloseMenuOnHover. Whenevent.pointerType === 'touch', both actions return early, preventing thehoverflag from being set.toggleMenuOnClickalso now callscloseMenu('hover')in its close branch, clearing any hover state set by a synthetic pointer event before the click fires.style.scss— Wrap the CSS:hoversubmenu rule in@media (hover: hover)so it only activates on devices whose primary pointer genuinely supports hover (mouse/trackpad), eliminating sticky touch-hover on mobile browsers.Testing Instructions