[Bug]: Sp-popover from Sp-picker closes when attempting to scroll through menu items

[yfloresdev]

Code of conduct

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

Impacted component(s)

Sp-picker

Expected behavior

User should be able to scroll through options from popover dropdown

Actual behavior

popover will close when user attempts to scroll.

Not browser specific. Happens for Sp-pickers hosted within express quick action dialogs. The issue is especially bad on iPad which seems to be related to how a "touch" behavior is handled in the spectrum code. From my debugging, the closing is coming from here in PlacementController.ts. I haven't been able to repro the issue on the simulator but the only fix i've found is changing the display of the sp-popover from inline-flex to something not flex like block or inline and adding and "overflow: auto".

Screenshots

Screen.Recording.2024-12-02.at.11.30.14.AM.mov

What browsers are you seeing the problem in?

Chrome, Safari

How can we reproduce this issue?

1. log in to https://new.express.adobe.com/
2. open caption video VQA
3. open language picker
4. attempt to scroll
5. See error

Sample code or abstract reproduction which illustrates the problem

No response

Severity

SEV 1

Logs taken while reproducing problem

No response

[Rajdeepc]

Hi @yfloresdev This is very use case specific and I went through your overlay structure and since these are nested we would like you to handle the scroll event from the Picker not to propagate up to the parent. This way you can stop the scrolling not to destroy.
Add an onchange handler to the picker and stop the propagation. (e) => e.stopPropogation()

[yfloresdev]

Thanks for the advice, this was able to fix my bug when adding (e) => e.stopPropogation() on the scroll event of the picker.

[Rajdeepc]

Thanks for working on this! Closing this issue