"closeOnSelection" property(Multiple selection out of box)

I want to propose new Prop named closeOnSelection.

What happened, Problem description: This codesandbox-example(Your Multi-select example with latest Downshift version) contains hardcoded solution: Menu doesn’t close(as it were), it open after close. Because of this, the highlightedIndex is reset; as well as existence of a lot of handlers that just control the state of isOpen.

Suggested solution:

  defaultProps = {
    // ...
    closeOnSelection: true,
    // ...
  }
  
  selectItem = (item, otherStateToSet, cb) => {
    otherStateToSet = pickState(otherStateToSet)
    this.internalSetState(
      {
        ...this.props.closeOnSelection
          ? {
              isOpen: false,
              highlightedIndex: this.props.defaultHighlightedIndex, 
            }
          : {},
        selectedItem: item,
        inputValue:
          this.isControlledProp('selectedItem') &&
          this.props.breakingChanges.resetInputOnSelection
            ? this.props.defaultInputValue
            : this.props.itemToString(item),
        ...otherStateToSet,
      },
      (...args) => {
        this.focusInput()
        typeof cb === 'function' && cb(...args)
      },
    )
  }

!NOTE: At now this will work fine only for the case with Input element, because it’s focusing after select.

[pas1ko]

Yes, i can. Of course, different. I’ll start a little bit later(in 2-3 hours). Thanks for support!

[kentcdodds]

Loving the ideas coming here. Thank you!