Is there a way to disable item selection?

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

Problem description:

Is there a way to disable the selection of an item based on some conditionals from the dropdown so that onSelect or onChanged doesn’t gets triggered?

Methods tried:

I’ve tried using stateReducer, however after pressing enter on an item that I want to disable, the dropdown loses focus and the keyboard arrow keys stops working.

function stateReducer(state, changes) {
  switch (changes.type) {
    case Downshift.stateChangeTypes.keyDownEnter:
    case Downshift.stateChangeTypes.clickItem: {

     // Basically I want to disable the selection of certain items.
     // something like event.preventDefault();
      const isRegistered = selectedItem.isRegistered;

      if (isRegistered) {
        return {
          ...changes,
          selectedItem: null,
          inputValue: state.inputValue,
          isOpen: state.isOpen,
          highlightedIndex: state.highlightedIndex,
        };
      }
      return changes;
    }
    default:
      return changes;
  }
}

[kentcdodds]

Hi @cusxio!

Thanks @Antontelesh and @austintackaberry for all your help here!

Hmmm… Make sure you’re on the latest version? Though that’s probably not it…

We do have support for disabling the input and the button with their respective prop getters. It makes sense to me that we’d add support for items as well…

So I’m going to go ahead and say let’s accept a PR to support this. All it really takes is to not return any of the event handlers if disabled is true. You can see the other similar implementations for a nice way to accomplish this.

Thanks!

[kentcdodds]

Yes please!