TypeAhead with allowNew=false leaves input text when going out of focus

Question

My users complain that they can enter new value (one that is not included in the options) even when that is not exactly the case.

When you input text, without selecting item from options and then leave the typeahead, the text stays there, which leads users to believe that new value (one that is not included in options) can be entered.

What would be the right way to deal with this? I am quite new to frontend development, so the answer might actually be obvious.

Answer 1

One way to address this is to clear the typeahead when the user blurs the input unless they've made a valid selection. Here's an example:

https://codepen.io/anon/pen/qLBaYK

class BlurryTypeahead extends React.Component {
  state = {
    selected: [],
  };

  render() {
    return (
      <Typeahead
        onBlur={this._handleBlur}
        onChange={this._handleChange}
        options={['one', 'two', 'three']}
        ref={typeahead => this._typeahead = typeahead}
        selected={this.state.selected}
      />
    );
  }

  _handleBlur = () => {
    // Check if there are selections.
    if (!this.state.selected.length) {
      // Clear the component if not.
      this._typeahead.getInstance().clear();
    }
  }

  _handleChange = (selected) => {
    // Track the selected state
    this.setState({ selected });
  }
}