List items: Loop list with keyboard navigation
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 6.9k
- Forks
- 1.1k
- Avg merge
- 1d 7h
- Merged PRs (30d)
- 57
Description
Package
v4.x
Description
Currently, keyboard navigation in UListbox and UCommandPalette (...and more) stops at the boundaries of the list: pressing ↓ on the last and pressing ↑ on the first item does nothing.
For a smoother and more ergonomic keyboard experience, navigation should wrap around:
- Pressing ↓ on the last item: jumps to the first item
- Pressing ↑ on the first item: jumps to the last item
This is a common UX pattern found in many command other libraries (e.g. Vuetify, Mui, Base-UI).
Related components
- InputMenu
- Listbox
- Select
- SelectMenu
- CommandPallete
- ContextMenu
- DropdownMenu
- ContentSearch
- LocaleSelect
Already supported
The following Editor components already implement such a behaviour:
- EditorEmojiMenu
- EditorMentionMenu
- EditorSuggestionMenu
Additional context
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by inspecting the Listbox, Select, SelectMenu, CommandPalette, and other related components named in the issue, comparing them with the existing EditorEmojiMenu, EditorMentionMenu, and EditorSuggestionMenu behavior. Implement and verify wraparound navigation so Down from the last item reaches the first and Up from the first reaches the last across the affected components.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100