Downshift: Preventing Selecting "Disabled" items?

[cycomachead]

• downshift version: 1.21.1
• node version: 6.9.1
• npm (or yarn) version: yarn 1.20

Relevant code or config

  handleSelection = (selectedItem, stateAndHelpers) => {
    if (!selectedItem) { return; }

    if (selectedItem.disabled) {
      stateAndHelpers.clearSelection();
      return;
    }

    if (this.props.clearOnSelect) { stateAndHelpers.clearSelection(); }
    stateAndHelpers.closeMenu();
    this.props.onSelect(selectedItem);
  }

...
  render() {
    return (
      <Downshift
        defaultHighlightedIndex={0}
        onSelect={this.handleSelection}
        itemToString={item => (item ? item.name : '')}
        render={this.renderAutocomplete}
      />
    );
  }

What you did:

I have a list of items, users in this case, some of which are disabled. I'm trying to prevent downshift from allowing them to be selected.

What happened:

So far, this works OK, except it also clears the input value -- which is what clearSelection was designed to do.

Reproduction repository:
I'll try to extract some code later, but I think this makes sense. This is a feature request /question and not a bug. :)

Problem description:
I'd like to be able to support disabled items. I think I might be able to get around this by managing the selectedItem state myself, but that seems like more than I'd like to do if possible.

Suggested solution:
It would be nice if a disabled attribute on an item in a menu prevented any selection from happening. Optionally, arrow keys could skip over them.

[kentcdodds]

Hi @cycomachead!

I wonder if you could simply not apply the getItemProps to the menu items you wish to have be disabled? For example :smile:

Though your suggestion does seem interesting, I prefer to keep downshift lean and primitive to avoid baking in too many opinions/functionality that others don't need. So I'll go ahead and close this, but feel free to convince me otherwise (a PR with tests is a good way to do that, though I can't promise it'll be merged).

Good luck!

[cycomachead]

Hi Kent,

Thanks so much for the quick response! I hadn't yet considered not sending item props. That's brilliantly simple! :)

[kentcdodds]

That's brilliantly simple! :)

😊

[giuseppeg]

Hi folks I am trying to figure out how to get Downshift to automatically jump to the next non-disabled item when using arrow (down/up) keys. I'd expect this to be the default behavior for disabled items but it doesn't seem to be the case. Any help is appreciated :)

[kentcdodds]

That actually makes sense as a default. I'd be interested to see a pull request that implements this if you'd be willing to open one up.

[kentcdodds]

Actually, thinking about it I just realized that this is not necessary. Just _don't_ call getItemProps for an item which you render which is disabled. Like in this example: https://codesandbox.io/s/v666z3o6ml

[giuseppeg]

uh indeed it works already, my highlighting logic for getIsActive was wrong :) I thought highlightedIndex === index would be enough. Thanks Kent!