fix: improve touch interaction handling for submenus #5867
Conversation
🦋 Changeset detectedLatest commit: 27e977a The changes in this PR will be included in the next version bump. This PR includes changesets to release 78 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
📚 Branch Preview🔍 Visual Regression Test ResultsWhen a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:
Deployed to Azure Blob Storage: If the changes are expected, update the |
shipg22
changed the title
shipg22
force-pushed
the
shiprag/fix-touch-submenu-interactions-v2
branch
from
934adf0 to
a8163fd
Compare
|
I am unable to open any submenu. Can you please check your logic once again. submenu.mov |
caseyisonit
left a comment
caseyisonit
left a comment
There was a problem hiding this comment.
Ran through the manual tests and this proposed fix is not working. submenus do not open at all. This needs more work on the logic to be considered.
…lose and reopen - Add _touchListenerActive flag to prevent multiple pointerup listeners from being registered - Reset flag in handleTouchSubmenuToggle after action completes - Prevents rapid close/reopen behavior when tapping on menu items with open submenus
shipg22
force-pushed
the
shiprag/fix-touch-submenu-interactions-v2
branch
from
7147e73 to
85cb5a8
Compare
- Add click event dispatch after touch tap to cover handleSubmenuClick touch prevention - Add touch pointerleave test to cover early return for touch devices - Add test for pointerdown on open submenu followed by focus to cover handleSubmenuFocus These targeted test enhancements improve coverage without adding entirely new test cases.
|
@shipg22 On my initial first pass the solution is not working for nested submenus.Please check and verify so that I can look into your logic more deeply. Attached video for reference. |
Rajdeepc
left a comment
Rajdeepc
left a comment
There was a problem hiding this comment.
The approach is good, but the implementation needs some hardening. Let me know if you would like to discuss on any of these!
| event.target === this && | ||
| !this._touchListenerActive | ||
| ) { | ||
| event.preventDefault(); // Prevent click suppression |
There was a problem hiding this comment.
preventDefault on pointerdown may suppress subsequent click or change expected browser behavior. This comment is also bit misleading. Can you please explain why this is required here?
If the intent is to prevent a synthetic click from triggering the overlay twice, then you should ensure cleanup via pointerup/pointercancel and ignore click in handleSubmenuClick based on pointerType
| // Toggle the submenu | ||
| if (this.open) { | ||
| this.open = false; | ||
| } else { | ||
| this.openOverlay(true); | ||
| } | ||
| }; |
There was a problem hiding this comment.
you are doing if (this.open) this.open = false; else this.openOverlay(true); Elsewhere you call this.openOverlay(true). Please ensure that closing/opening is consistently done via one API to avoid confusion and mismatched cleanup.
There was a problem hiding this comment.
This is how it's handled in the existing code. Trying to change it creates more issues down the line.
shipg22
force-pushed
the
shiprag/fix-touch-submenu-interactions-v2
branch
from
4e02eb4 to
862bc01
Compare
Description
Submenu interaction is fixed for touch devices.
Submenu should open on hover for desktop and on click for touch devices.
First click should open, and second click should close the submenu on touch devices.
Motivation and context
Related issue(s)
[CCEX-244009]
Screenshots (if appropriate)
Author's checklist
Reviewer's checklist
patch,minor, ormajorfeaturesManual review test cases
Storybook
In dev tool select any touch screen device, for eg; iPad mini
open menu
Touch submenu under menu
Touch any submenu item
it should open menu under submenu if available, otherwise would select that item
Touch any nested menu item, it should open submenu if available, otherwise would select that item
Subsequent touch should open and close submenus
Device review