adobe / adobe/spectrum-web-components

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

Open
#5,555 6 comments 0 reactions 0 assignees View on GitHub
bug Component:Overlay Component:Picker Component:Popover SEV 3
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.