adobe / adobe/spectrum-web-components
[Bug]: When rendered inside a popover, arrow navigation within a Picker's items doesn't highlight active option
- Dominant language
- TypeScript
- Stars
- 1.5k
- Forks
- 262
- Avg merge
- 3d 10h
- Merged PRs (30d)
- 68
Description
### Code of conduct
- [x] 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!
Contributor guide
Research direction
Reproduce the issue in Safari using the StackBlitz example at src/picker-in-popover.ts, focusing on the sp-picker, sp-overlay, and sp-popover interaction. Trace the picker’s arrow-key navigation and active-option highlighting, then verify that the highlighted option follows the selection when the picker is opened inside a popover.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100