adobe / adobe/spectrum-web-components

[Bug]: keyboard navigation in scrollable picker menu is interrupted by mouse hover

Open
#5,693 1 comment 0 reactions 0 assignees View on GitHub
bug Component:Picker triage
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

### Library version

1.7.0

### Expected behavior

When reaching the end of the menu while navigating with the keyboard, mouse position should not influence the selection when scrollbar jumps. The next element in the menu should be focused

### Actual behavior

Mouse hover takes priority over keyboard focus when scrollbar jumps

https://github.com/user-attachments/assets/8f73c902-3a3f-4c80-bd38-52d632a9d4e4

### Screenshots

_No response_

### What browsers are you seeing the problem in?

Chrome

### How can we reproduce this issue?

1. Test on a sp-picker with a scrollable menu
2. Place the mouse inside of the dropdown
3. Start navigating in dropdown with the arrow keys
4. When the selection reaches the end of the visibile content, notice how the next selection becomes the one that the mouse hovers

### Sample code or abstract reproduction which illustrates the problem

https://stackblitz.com/edit/vitejs-vite-rbexfqdo?file=src%2Fmy-element.ts

### Severity

SEV 3

### Logs taken while reproducing problem

_No response_

### Would you like to track this issue in Jira?

- [x] Yes, please tell me the ticket number!

Contributor guide

Open the contributing guide

Research direction

Start with the sp-picker implementation and the linked StackBlitz reproduction in Chrome. Reproduce keyboard navigation with the pointer inside a scrollable menu, then trace the interaction between hover and keyboard focus when scrolling reaches the end. Done means the next keyboard-selected element remains focused instead of being replaced by the hovered item.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 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.