adobe / adobe/spectrum-web-components
[Bug]: keyboard navigation in scrollable picker menu is interrupted by mouse hover
- 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
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