adobe / adobe/spectrum-web-components

[Bug]: Non-iOS Touch Devices exhibit "click through" from sp-action-menu

Open
#4,270 3 comments 0 reactions 0 assignees View on GitHub
Android Browser:Chrome bug Component:Action menu firefox Needs repro SEV missing
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.