Giters

downshift-js / downshift

🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.

Home Page:http://downshift-js.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Pressing shift + tab selects highlighted item

vongb opened this issue · comments

commented
  • downshift version: 9.0.6
  • node version: v18.20.1
  • npm (or yarn) version: 1.22.19

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)

commented

This can be fixed by not calling setSelectedItems on InputBlur

commented

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