React-Bootstrap-Typeahead allowNew select-on-blur

Question

Is it possible to configure this so when allowNew is set that any new entry in this field would be selected on blur rather than clicking on the new item "menu"

EDITED: This is my existing child component

<Typeahead
   labelKey="label"
   allowNew
   selectHintOnEnter
   options={props.campaignOptions}
   placeholder="Campaign Name..."
   onChange={props.campaignName}
 />

And this is my parent component...

campaignName (campaign){
  campaign.length ? this.setState({campaignSelected:campaign}) : this.setState({campaignSelected:''})
  }

...

<FormGroup>
    <Campaign
     campaignName={this.campaignName.bind(this)}
     campaignOptions={[...new Set(this.props.records.map(options => options.campaign))]}/>
 </FormGroup>

Answer 1

It's possible in the single-select case. Here's how you could do it:

class MyComponent extends React.Component {
  state = {
    selected: [],
    text: '',
  };

  render() {
    const {selected, text} = this.state;

    return (
      <Typeahead
        allowNew
        onBlur={(e) => this.setState({selected: text ? [text] : []})}
        onChange={selected => this.setState({selected})}
        onInputChange={(text) => this.setState({text})}
        options={this.props.options}
        selected={selected}
      />
    );
  }
}

Note that the code above simply sets the input value as the selection. You most likely want to convert the string to an object that has a unique identifier, like an ID.

It's not possible to do it in the multi-select case because you'd need to clear just the text input (not the selections) after the selecting the text, and there's no API for doing that.