Clearing inputText using react-bootstrap-typeahead when invalid data is entered

Question

I'm trying to validate a selection using react-bootstrap-typeahead and clear out the input text if invalid when I move to another area of the page.

I can't figure out a good way to do this.

The onBlur for the Typeahead component doesn't fire at the right time to validate and clear.

Any suggestions would be appreciated

Here is my typeahead definition

        <Typeahead  bsSize="sm"
                    defaultSelected = {this.props.options.slice(selectedIndex)}
                    clearButton
                    labelKey="roomNumber"
                    options={this.props.options}
                    placeholder={this.props.placeholder}                          
                    name={this.props.nameId}
                    ref={ref => this.roomChoice = ref}
                    onChange={this.onChangeHandler.bind(this)}
                    onInputChange={this.onInputChangeHandler.bind(this)}
                    onBlur={this.onBlurHandler.bind(this)} 
                    onFocus={this.onFocusHandler.bind(this)} 
                  />

Here is my onBlur Function:

onBlurHandler(event)
{   
         if (this.roomInputText)
        {
            if (!this.roomSelectedOption)
            {
                this.roomChoice.getInstance().clear()
            }
        }

}

The onBlur isn't firing in the right time for me to have a selected option if someone entered text.

Answer 1

Get the ref in TypeAhead instance, using a callback ref, and use in onchange event call.

<div>
  <Typeahead
    options={[...]}
    ref={(ref) => this._typeahead = ref}
    onInputChange={this.onInputChangeSelection}
 />
</div>




onInputChangePartsSelection = (value) => {
    if (value) {
    const instance = this._typeahead.getInstance()
    instance.clear()
    instance.focus()
    }
  }

Answer 2

I was using AsyncTypeAhead and had to do the following.

var asyncTypeAhead = typeAhead as AsyncTypeahead;
asyncTypeAhead.getInstance().clear();

I found this post useful https://github.com/ericgio/react-bootstrap-typeahead/issues/359