Downshift: Is there a way to disable item selection?

[cusxio]

• 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;
  }
}

[Antontelesh]

Did you try removing the call to getItemProps on the item you want to be disabled?

[cusxio]

removing getItemProps also removes any keyboard interaction on the item.

Is there a way to disable the clickItem or keyDownEnter so that the input doesn't get refocus on those events?

The problem I'm facing right now is that the dropdown loses focus when those events are triggered, because the input is refocus.

[Antontelesh]

There are some discussions under #353 around that. Other than that, I believe, there is only a way to use stateReducer or to override Downshift event handlers.

[austintackaberry]

I agree with @Antontelesh in that I don't believe you can prevent onSelect from being called when you click on an item or when you hit Enter on a highlighted item.

However, I have an example that may fit your needs. In this example, if the user clicks on or presses Enter on an item that starts with "A", then nothing happens. The menu stays in focus and the arrow keys still work. Please let me know if this solution doesn't work for you! (Note in the console that onSelect still gets called unfortunately)

https://codesandbox.io/s/z3zp9v3m3x

Note that you could land on a similar solution using stateReducer if you didn't want to add selectedItem as a control prop.

[cusxio]

@austintackaberry thank you for the example. 🙏

However, while trying to implement a similar solution on the app I'm working on, keyDownArrowUp and keyDownArrowDown event just stops working after pressing keyDownEnter.

My stateReducer function is not triggered on arrow keys keydown. Can't find the root cause for this, so still debugging it!

[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!

[austintackaberry]

Sounds good to me, I'd be happy to take this one on! Also, looks like the disabled feature isn't in the docs. I'd be happy to add that as well.

[kentcdodds]

Yes please!