Description
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