adobe / adobe/spectrum-web-components
[Bug]: Non-iOS Touch Devices exhibit "click through" from sp-action-menu
- Dominant language
- TypeScript
- Stars
- 1.5k
- Forks
- 262
- Avg merge
- 3d 10h
- Merged PRs (30d)
- 68
Description
### Code of conduct
- [X] I agree to follow this project's code of conduct.
### Impacted component(s)
sp-action-menu
### Expected behavior
On selecting an option from the menu, that event should not apply/propagate to other elements in the DOM.
### Actual behavior
If an action menu item is positioned directly on top of some other element with a click handler (like a button), on selecting that menu item, the menu will close (expected) and the item beneath it will be targeted for a click event.
This occurs in all non-iOS touch devices -- small phone devices and tablets alike (so both sp-tray and popover).
Verified an issue in mobile emulators in Chrome and Firefox.
Verified with real devices running Android and Chrome via Browser Stack
Verified with a physical device running Android and Chrome (Samsung Galaxy S22)
### Screenshots
SWC only sandbox in Chrome, emulating an iPhone SE window size:
https://github.com/adobe/spectrum-web-components/assets/14302445/7a405fa7-b554-43ea-a758-e9a0a2bef166
SWC only sandbox in Firefox, emulating an iPad:
https://github.com/adobe/spectrum-web-components/assets/14302445/7d672933-4ccf-4ec1-a6fa-827934d878ff
### What browsers are you seeing the problem in?
Firefox, Chrome
### How can we reproduce this issue?
Here are some code sandboxes to reproduce the issue.
NOTE: this is a bit inconsistent -- in Chrome the issue only happens on the first load. Subsequent refreshes of the same tab didn't yield the console.log/problem. In Firefox, it happened every time. A different engineer had the opposite happen where it didn't have the first time in Chrome, but after subsequent refreshes it happen.
I suggest opening dev tools and changing the dimensions to match an iPhone SE to have the elements overlay as intended.
Pure SWC/lit component sandbox:
https://studio.webcomponents.dev/preview/oEUer0gOM1bd0Xar06jD/src?busid=10aeadb0-fb51-11ee-8db7-c3e82e8ed087
Sandbox where SWCs are rendered in a React environment:
https://9p9grt-5173.csb.app/
### Sample code that illustrates the problem
_No response_
### Logs taken while reproducing problem
_No response_
Contributor guide
Research direction
Start with the sp-action-menu component and reproduce the click-through behavior using the linked SWC and React sandboxes, testing Chrome and Firefox on touch-sized layouts. Done means selecting a menu item closes the menu without triggering the underlying element's click handler on non-iOS touch devices.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100