[Bug]: (iOS) sp-card (supplied with an actions slot) action menu opens tray and on menu item selection in tray, if other card is behind it registers click on it as well.

[jaya-Adobe]

Code of conduct

• [X] I agree to follow this project's code of conduct.

Impacted component(s)

Firefly

Expected behavior

on Selecting menu item in tray, it should not pass events to the component behind it.

Actual behavior

It passes the click event to sp-card behind it. It happens in iOS (iPhone 11 Pro) , all browser.

Screenshots

https://github.com/adobe/spectrum-web-components/assets/110904672/8f64ea19-f725-470b-86a5-4aaa61fb0b86

What browsers are you seeing the problem in?

Chrome

How can we reproduce this issue?

1. Go to https://studio.webcomponents.dev/edit/GnkodO5cuznEsnNm8DyF/src/index.ts?p=stories on iOS (iPhone 11)
2. Open action menu, such that behind a menu item in tray, there must be another sp-card
3. Check console logs. It prints card clicked , {index} (0-based) when that card click event is triggered.
4. As can be seen in recording,

Card clicked 0 - which means action menu of index 0 card is clicked

Select a menu item in tray, such that card-3 is behind it . On click - it logs : Card clicked 3 , which means click was registered for card 3 as well.

Note : the issue reproduces on some Android as well, but the frequency is a bit low. But easily repro in iOS

https://github.com/adobe/spectrum-web-components/assets/110904672/d8d7384d-86df-4d89-a386-6eef1b74dfc5

Sample code that illustrates the problem

Story book - https://studio.webcomponents.dev/edit/GnkodO5cuznEsnNm8DyF/src/index.ts?p=stories

Logs taken while reproducing problem

No response

[Rajdeepc]

This issue is being tracked here #4227

[godanny86]

hi @Rajdeepc in case this is helpful, our team has also created this sandbox that reliably reproduces the issue:

https://studio.webcomponents.dev/edit/OfeOwrikpHyrhWv6YvUI/src/index.ts?p=stories

In iOS 17.4 Safari the bug seems to be less frequent, but will eventually happen:

https://github.com/adobe/spectrum-web-components/assets/8974514/62d05d8e-961f-41ac-840a-1294bb264589 You can also see that there is a double change event happening as reported in: https://github.com/adobe/spectrum-web-components/issues/4459

In iOS 17.4 using the Chrome browser the bug seems much more frequent and happens on most clicks:

https://github.com/adobe/spectrum-web-components/assets/8974514/2c32ffad-b88f-44e4-b478-b5219f27756e