TypeAhead с allowNew = false оставляет вводимый текст при выходе из фокуса

Question

Мои пользователи жалуются, что они могут ввести новое значение (которое не включено в параметры), даже если это не совсем так.

Когда вы вводите текст, не выбирая элемент из параметров, а затем оставляетеНапротив, текст остается там, что заставляет пользователей верить, что можно ввести новое значение (то, которое не включено в параметры).

Как правильно решить эту проблему?Я совершенно новичок в разработке интерфейсов, поэтому ответ может быть очевиден.

Answer 1

Одним из способов решения этой проблемы является очистка заголовка, когда пользователь стирает ввод, если он не сделал правильный выбор.Вот пример:

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 });
  }
}