[Bug]: Touch events registered behind trays from sp-pickers in Express quick actions mobile

[yfloresdev]

Code of conduct

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

Impacted component(s)

sp-picker

Expected behavior

selecting menu item should not interact with any components behind menu items tray

Actual behavior

buttons and components that are behind tray can be interacted with, happens with all pickers in all Express quick actions on mobile

Screenshots

ScreenRecording_12-11-2024.10-36-58_1.mov

What browsers are you seeing the problem in?

Safari

How can we reproduce this issue?

1. open Express mobile app or open Express on mobile browser (head to https://new.express.adobe.com/your-stuff/files to bypass open in app screen)
2. open remove background quick action from Home Screen
3. Upload photo
4. open category picker
5. touch anywhere on tray where another component is behind it and see interactions

Sample code or abstract reproduction which illustrates the problem

No response

Severity

SEV 3

Logs taken while reproducing problem

No response

[Rocss]

This seems to be specific to touch devices, I reproduce this on iPad as well, where the picker is a dropdown, not a tray.

[najikahalsema]

Jira: SWC-625

[TarunAdobe]

I am not able to reproduce this in the latest SWC versions (>1.0.0). Please check the attached recording. It would be really helpful if you can update to the latest version and test this out once.
screen-capture.webm

[Rocss]

This is not reproducing in SWC, as it seems to have been fixed by #4879

In Express, this commit is specifically removed from the build, because it seems it created some problems with some dialogs not closing anymore. The problems reported were not reproduced in SWC, so it may be some unsupported usage of the components.

I don't know why exactly this commit fixes this particular issue. Adding it back in Express resolves the bug mentioned in this issue.

cc: @rubencarvalho