React-bootstrap-typeahead: Ability to keep menu open during multi-select

[damonmiller]

Current Version: 3.2.2

Description of use:
We recently switched from react-select to react-bootstrap-typeahead which we like way better!!! However, after looking through all your docs there is still one feature that I have not been able to make work which existed in react-select - the ability to leave the menu open when selecting multiple options. This is extremely handy for multi-select boxes!

For reference, here is the information on the property from react-select: https://react-select.com/props
closeMenuOnSelect boolean = true
Close the select menu when the user selects an option

Feature Request:
Add a boolean property on whether to close the menu upon selection, defaulting to true like it currently behaves.

[ericgio]

Hey @damonmiller, thanks for the kind words :) Note that what you're asking for is possible by doing the following:

<Typeahead
  multiple
  onChange={(selected) => {
    // Retain focus to keep the menu open when making new selections.
    if (selected.length === this.state.selected.length + 1) {
      this._typeahead.getInstance().blur();
      this._typeahead.getInstance().focus();
    }
    this.setState({selected});
  }}
  options={[ ... ]}
  ref={(typeahead) => this._typeahead = typeahead}
  selected={this.state.selected}
/>

It's a little hacky because the input retains focus when an item is selected, so you need to blur and re-focus the input to re-open the menu. It should give you the behavior you want though. As far as adding this as a feature, I'll consider it, though my general philosophy has been to try and provide a flexible API that allows customization rather than simply add one-off props. If I did add a prop, it would probably be for controlling the menu (see #325) which would provide better control for the code above.

[damonmiller]

Thanks! This worked beautifully as a workaround!

[ericgio]

open and defaultOpen props were added in v3.3.0