downshift-js / downshift-js/downshift

Select / highlight first item, that is not disabled when using arrow keys to open the menu

Open
#1,593 0 comments 0 reactions 0 assignees View on GitHub
enhancement help wanted
Dominant language
JavaScript
Stars
12.3k
Forks
936
PR merge metrics
No merged PRs in 30d

Description

### Problem
Whilst #1591 fixes the problem, that disabled items could be selected when opening the menu with the arrow keys (described in #1587 and #1295), it would be nice from a UX / a11y perspective to select the first item that is NOT disabled.

Currently, if either the first or the last item is disabled and the menu is triggered with ArrowUp / ArrowDown only the menu itself opens, but no highlighting / jumping into the menu itself happens.

Sandbox: https://codesandbox.io/p/sandbox/morning-morning-326kwz

This is especially confusing, when the last item in the menu is disabled and one presses ArrowUp. The menu opens, but the user is only able to see the items at the top of the menu.

### Suggestions / Feature Requests

- When pressing ArrowDown and the first item(s) in the menu is (are) disabled, traverse down the items until the first item that is not disabled is found and highlight / select it (aria-selected="true")
- When pressing ArrowUp and the last item(s) in the menu is (are) disabled, traverse up the items until the fist item that is not disabled is found and highlight / select it (aria-selected="true")
- When no item can be highlighted / selected (because all are disabled) just simple open up the menu.

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.