Navigation Submenus: Skip hover handlers on touch devices using (hover: none) media query#75966
Closed
Navigation Submenus: Skip hover handlers on touch devices using (hover: none) media query#75966
Conversation
… touch devices When using hover mode with submenu indicators shown, tapping the chevron on touch devices would open the submenu but tapping it again wouldn't close it. This was because toggleMenuOnClick only cleared the 'click' and 'focus' open states, but not the 'hover' state. On touch devices, the browser fires a synthetic mouseenter event which sets hover=true, and this state was never cleared when the user tapped the chevron to close. Fix: Update toggleMenuOnClick to also check and close the 'hover' state. Co-authored-by: scruffian <275961+scruffian@users.noreply.github.com>
Copilot
AI
changed the title
[WIP] Fix chevron to toggle navigation submenu open and close
Navigation Submenus: Fix chevron not closing submenu in hover mode on touch devices
Feb 26, 2026
|
Size Change: +139 B (0%) Total Size: 6.87 MB
ℹ️ View Unchanged
|
Contributor
|
Is this the expected behavior when using |
jeryj
reviewed
Feb 26, 2026
Contributor
jeryj
left a comment
There was a problem hiding this comment.
This doesn't fix the issue. Should we allow hover within navigation overlays? Previously there was no ability to open/close menu items since they were always expanded. I think the fix here is more to fully hook up hover/click within overlays. I'm guessing there's some bindings and styles that are missing since it wasn't previously possible.
Screen.Recording.2026-02-26.at.2.13.12.PM.mov
Also, the submenu flyout is positioned off screen. This happens on trunk too.
The toggle condition should only check click/focus states to determine
direction. Including hover caused the first chevron click to close
(instead of open) when CSS :hover was active, inverting the toggle
behavior and breaking the e2e test. The closeMenu('hover') call in the
close branch still ensures hover is cleared on touch devices.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
On touch devices, mouseenter/mouseleave are synthetic events fired on tap. This causes hover state to be set but never cleared (no real mouseleave), making submenus impossible to close with a single tap. Guard openMenuOnHover and closeMenuOnHover with a (hover: none) check so touch devices only use click-based toggling. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Verifies that mouseenter does not open submenus when (hover: none) matches (touch devices), and that the chevron click toggle works correctly with a single tap to open and a single tap to close. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
With the (hover: none) media query guard, hover state is never set on touch devices, so there is nothing to clear in the close paths. On desktop, mouseleave handles clearing hover state naturally. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Use browser.newContext({ hasTouch: true }) for proper touch emulation
instead of matchMedia mock. Add complementary test verifying hover still
works on non-touch devices.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
When a submenu is opened via hover and the user clicks the chevron to close it, toggleMenuOnClick only checked click/focus states. Since hover was still true, the menu stayed open. Now the toggle also checks and clears the hover state, allowing the chevron to close hover-opened menus. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Verifies that the chevron button toggles aria-expanded and the submenu is hidden once focus leaves the button. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
The submenu's CSS :hover rule kept the submenu visible even after toggleMenuOnClick closed it, because the mouse was still on the element. Add a reactive closedByClick context variable that adds a CSS class to the <li>, suppressing the :hover rule. The class is reset when the mouse re-enters via openMenuOnHover, restoring normal hover behavior. Also revert toggleMenuOnClick condition to check click||focus (not hover), so clicking the chevron on a hover-opened submenu "pins" it open rather than immediately closing it. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Contributor
|
Closing in favour of #76197 |
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
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.
Description
Fixes navigation submenu chevron not closing the submenu on touch devices and desktop.
Problem 1: Hover state never clears on touch devices
On touch devices, tapping a submenu fires a synthetic
mouseenter(butmouseleavenever fires), causing the hover state to persist and the submenu to stay permanently open.Fix: Guard
openMenuOnHover()andcloseMenuOnHover()withwindow.matchMedia('(hover: none)').Problem 2: Chevron click doesn't close hover-opened submenus
When clicking the chevron to close,
toggleMenuOnClickonly clearedclickandfocusstates —hoverremainedtrue.Fix: Clear
hoverstate intoggleMenuOnClick's close branch (whenclick || focusis true).Problem 3: CSS
:hoveroverrides JavaScript stateEven after JavaScript correctly closes the submenu, the CSS
:hoverrule kept it visible because the cursor was still on the element.Fix: Add a reactive
closedByClickcontext variable that applies aclosed-by-clickCSS class to the<li>, suppressing the:hoverrule. The class resets onmouseenter(viaopenMenuOnHover), restoring normal hover behavior when the mouse re-enters.Interaction model
Test plan
navigation-frontend-interactivity.spec.js:submenu does not open via hover on touch devices— mouseenter blocked by(hover: none)guardchevron opens and closes submenu on touch devices— chevron toggle works inhasTouchcontextsubmenu still opens via hover on non-touch devices— normal hover unaffectedFixes #75965
🤖 Generated with Claude Code