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

[croberts5]

trafficstars

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

[TarunAdobe]

Hello @croberts5 I tried testing your demo on my chrome, safari and firefox and I am unable to reproduce the bug. Can you please share your browser versions to help investigate further.

[croberts5]

macOS 14.1. Chrome version 123.0.6312.122 (Official Build) (arm64) Firefox 124.0.2 (64-bit)

Issue not present in Safari. Thanks!

I'd also suggest testing using an Android mobile device running Chrome. Consistently reproducible on Galaxy devices (via Browser Stack)

[Westbrook]

Seems like a duplicate of #4227.