Preventing Selecting "Disabled" items?

• 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]

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

[cycomachead]

Hi Kent,

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