[Bug]: When rendered inside a popover, arrow navigation within a Picker's items doesn't highlight active option

[RuxG]

Code of conduct

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

Impacted component(s)

sp-picker, sp-overlay, sp-popover

Expected behavior

When an sp-picker is rendered within a popover, it should work the same as it would when it is not rendered within a popover.

Actual behavior

On Safari, when an sp-picker is rendered within a popover, when I want to navigate using the up/down arrow keys through the picker options, the active option is not highlighted. If I navigate 2 options down, pressing Space changes the selection correctly, but the active option (2 options down) does not become highlighted after pressing the down arrow keys. The first option remains highlighted.

Screenshots

No response

What browsers are you seeing the problem in?

Safari

How can we reproduce this issue?

1. Open this example on Safari: https://stackblitz.com/edit/vitejs-vite-cxzhjfdh?file=src%2Fpicker-in-popover.ts
2. Navigate to the "Overlay Trigger" button by tabbing.
3. Press Space to open the overlay.
4. Tab to focus the sp-picker
5. Press Space to open the picker options
6. Use the Up/Down arrow keys to navigate through the picker options and observe.

Sample code or abstract reproduction which illustrates the problem

https://stackblitz.com/edit/vitejs-vite-cxzhjfdh?file=src%2Fpicker-in-popover.ts
No response

Severity

None

Logs taken while reproducing problem

No response

Would you like to track this issue in Jira?

• Yes, please tell me the ticket number!

[najikahalsema]

Is this reproducible in other browsers, or just Safari? @RuxG

[RuxG]

Aside from Safari, I've only tried on Chrome. On Chrome, it does not reproduce.

[najikahalsema]

Thank you for letting me know!

SWC-932