defaultHighlightedIndex will select disabled items

[jsvossen]

• downshift version: 9.0.0
• node version: 18.18.2
• npm (or yarn) version: 9.8.1

Relevant code or config

useCombobox({
    isItemDisabled: () => true,
    defaultHighlightedIndex: 0,
    ...
})

What you did:

Set defaultHighlightedIndex={0} with items that are disabled.

What happened:

The disabled item is automatically highlighted, and can be selected by pressing enter.

Reproduction repository:

https://codesandbox.io/p/sandbox/determined-euler-jllv45

Problem description:

defaultHighlightedIndex should not be able to select items that are disabled.

Suggested solution:

Check isItemDisabled before applying highlighted styles or returning the selected item.

[jsvossen]

Thanks for the fix, but we're still seeing issues with disabled items getting selected. #1587 fixed selected items on open, but if you start typing and the list filters, the first item is still getting highlighted and is selectable by pressing enter.

https://codesandbox.io/p/sandbox/determined-euler-jllv45?file=%2Fsrc%2Findex.tsx%3A19%2C58