downshift-js / downshift-js/downshift
[useSelect]: highlightedIndex vs selectedItem
- Dominant language
- JavaScript
- Stars
- 12.3k
- Forks
- 936
- PR merge metrics
- No merged PRs in 30d
Description
- `downshift` version: 4.1.0
- `node` version: 12.13.0
- `npm` (or `yarn`) version: `yarn` 1.21.1
This is mostly a question, What is the difference between `highlightedIndex` and `selectedItem`, besides the obvious index vs item?
`highlightedIndex` from the naming would be the item being hovered or focused. However, it seems to mean something more akin to "selectedIndex".
`highlightedIndex` is used for calculating `aria-selected` which is even more confusing IMO. I'm unsure how I can tell a hover/highlighted state from an actual selected state since `aria-selected` is changed to true for any item that is hovered.
I would propose renaming `highlightedIndex` to `selectedIndex` and adding a new `highlightedIndex` that is the actual hover/highlighted state.
I could be misunderstanding or missing how to find the actual selected item though. For now I'm working around it by adding `aria-checked={selectedItem && selectedItem === item}`.
Contributor guide
Assessment
This issue has not been assessed yet.