Disabled items are highlighted and are selectable by pressing enter after input value change

[jsvossen]

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

Relevant code or config

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

What you did:

1. Set defaultHighlightedIndex={0} with items that are disabled.
2. Entered some text in the input field

What happened:
This is related to the bug I filed earlier (#1584)
The disabled items are now properly disabled on open, but after entering text the first one is automatically highlighted and can be selected by pressing enter.

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

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.

[nakulnagariy]

You could use something like this:

useCombobox({
      stateReducer(_, actionAndChanges) {
        const { changes, type } = actionAndChanges;
        switch (type) {
          case useCombobox.stateChangeTypes.InputKeyDownEnter:
          case useCombobox.stateChangeTypes.ItemClick:
            const isItemDisabled = changes?.selectedItem?.disabled;
            if (!isItemDisabled && changes.selectedItem) {
              handleItemClick(changes.selectedItem);
              /**
               * have a custom function for handling click event
               */
              const newChanges = {
                ...changes,
                inputValue: filterValue,
              };
              return {
                ...newChanges,
                isOpen: isMultiSelect, // keep the menu open after selection.
                highlightedIndex: changes.selectedItem
                  ? options.indexOf(changes?.selectedItem)
                  : 0, // workaround to stay on the same place.
              };
            } else {
              /**
               * For disabled item, just keep the menu open and dont select it
               */
              return {
                isOpen: isMultiSelect,
                highlightedIndex: changes.selectedItem
                  ? options.indexOf(changes?.selectedItem) + 1
                  : 0, // workaround to stay on the same place.
              };
            }

[jsvossen]

@nakulnagariy Yes, the reducer is what we're doing right now as a workaround until downshift is able to fix the bug on their end. I'm just hoping we can clean this up at some point, especially since we don't actually need a custom reducer for anything else.

[silviuaavram]

Thanks for reporting it! Will look into it.

[silviuaavram]

We are going to fix all the possible cases on our end, however we might not be able to do anything when it comes to filtering, because of the order of events.

Open the dropdown by input change, state change, check if defaultHighlightedIndex item is disabled, if not make it highlighted, but then if you filter the items and that item is not on the same position, and instead you have an item that's not disabled, it will not get highlighted because of that previous disabled check.