downshift-js / downshift-js/downshift

[useSelect]: highlightedIndex vs selectedItem

Open
#935 10 comments 1 reaction 0 assignees View on GitHub
enhancement needs discussion
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.