useCombobox does not auto-select `highlightedIndex` after tab `onBlur`

[James Viall]

• downshift version: 7.6.0
• node version: 18
• npm (or yarn) version:

What you did:
Used the keyboard to type a query and then highlight an item, and then used the Tab key to blur the input.

What happened:
The input blurred, leaving the query text in the input, and did not select the highlighted index. The docs for this event handler specify that when using tab, the highlighted index will be selected:

Blur(Tab, Shift+Tab): It will close the menu and select the highlighted item, if any. The focus will move naturally to the next/previous element in the Tab order.

This seems to work when controlling the selectedItem, such as within a form, but does not when leaving the combobox uncontrolled. See the codesandbox below.

Reproduction repository:
Reproduced in uncontrolled combobox:
https://codesandbox.io/s/combobox-doesnt-select-highlighted-wxdxhh?file=/src/Combobox.tsx

Working in controlled combobox within a form:
https://codesandbox.io/s/rhf-native-validation-w-zod--downshift-combobox-8qf6sj

Problem description:
Highlighted index is not selected after onBlur event using Tab key.

Suggested solution:

[Silviu Alexandru Avram]

It may be related to #1484. Needs to be investigated. Thank you for reporting it!

[Silviu Alexandru Avram]

Unfortunately, it is related to that fix. The relatedTarget is null when the input is the last element in the tab order, and we hit tab. This needs to be fixed.

[James Viall]

@silviuaavram thank you for the prompt fix!