downshift-js / downshift

🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.
http://downshift-js.com/
MIT License
12.11k stars 932 forks source link

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

Open conflma opened 8 months ago

conflma commented 8 months ago

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