"closeOnSelection" property(Multiple selection out of box)

[serg-plusplus]

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.

[kentcdodds]

Seems like a good idea!

What if we made the solution more powerful. What if we added a prop called modifyStateChange and we put it here:

stateToSet = this.props.modifyStateChange(stateToSet, state)

Where the default would simply return stateToSet but you could provide your own function that could modify the state that will be set. You could check the type property of stateToSet against this list to know whether you want to modify how the state is changed.

This would actually allow people to not have to control state quite as much I think which would be pretty handy!

What do you think?

[serg-plusplus]

@kentcdodds, Yeah! Looks great! i like this solution 👍, thanks.
And, the last important problem for me 😊 - its .focusInput(). I think, focusing on Input element after reset - is bad pattern. What if we focus last focused element BEFORE reset? This will be flex solution.
Probably need to Cash this element...🤔
What do you think?
Migrated #323

[kentcdodds]

What if we focus last focused element BEFORE reset?

Yep, I love that 👍

Would you like to work on both of those? They should be in different PRs I think :)

[serg-plusplus]

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!