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

[croberts5]

Code of conduct

• 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:

chrome_iphone.mov

SWC only sandbox in Firefox, emulating an iPad:

ipad_firefox.mov

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.