[Bug]: Picker inside dialog registers click to items behind it on iOS

[godanny86]

Code of conduct

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

Impacted component(s)

picker, tray, dialog

Expected behavior

When using a picker inside of a dialog on mobile-sized iOS, a tray should be shown with menu items to select. When tapping/clicking the menu items a click should not be registered on the elements behind it.

Actual behavior

When using a picker inside of a dialog on mobile-sized iOS, the tray of menu items is registering a click of the elements behind it. This causes unexpected results for the user when attempting to select an item. This looks to be a similar bug as #4461 but here it is manifesting when the picker and menu items are surfaced via a dialog.

Screenshots

Screen.Recording.2024-08-23.at.10.12.27.AM.mov

What browsers are you seeing the problem in?

Chrome, Safari

How can we reproduce this issue?

1. Go to the sandbox: https://studio.webcomponents.dev/edit/OYxI2EWUj8kYVXV6vBsy?p=stories on an iPhone
2. Click on 'Dialog with autofocus select' to open the dialog
3. Click on the picker to open the menu items
4. Click on an item like "Select and mask..." that would place the menu item over the button behind it.
5. Observe that a click is registered to the element behind it.

Sample code or abstract reproduction which illustrates the problem

No response

Severity

None

Logs taken while reproducing problem

No response