search

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.06k stars 929 forks source link

Pressing shift + tab selects highlighted item #1604

Closed vongb closed 2 weeks ago

vongb commented 4 months ago

What you did:

  1. Open the dropdown
  2. Make sure there is a highlighted item
  3. Press Shift + Tab
  4. Dropdown closes (expected)
  5. Highlighted item selected (unexpected)

This can be reproduced in the useMultipleSelection with combobox example in downshift-js.com

What happened:

Reproduction repository:

Problem description: If I understand correctly, the highlighted item should not be selected when Shift + Tab is pressed, it should just navigate to the previous element in the tab index. I think it's selecting it because of this code here. When we shift tab to a previous element, that bit will be false which will tell the reducer to select an item.

Suggested solution: I'm thinking we can just rely just on checking if the active element is the document body. (Not sure if I'm missing another use case here)

vongb commented 3 months ago

This can be fixed by not calling setSelectedItems on InputBlur

vongb commented 3 months ago

Ah but if setSelectedItem is not called for InputBlur. Pressing Tab key does not select the highlighted item which is recommended for comboboxes