Выберите автоматически заполненный текст при вводе реагировать

Question

У меня есть вход на моем сайте React. Имеет функцию автозаполнения. Я хочу выделить автозаполненную часть текста при вводе, как это происходит при вводе текста в Google. При запуске моего кода (приведенного ниже), когда я набираю «do», он автоматически заполняет «dog dog», как и должно, но ничего не выбирает, затем, если я нажимаю клавишу «Backspace», он удаляет последнюю букву, а затем выбирает автозаполненную часть текста. У меня вопрос: почему текст не выделяется перед нажатием клавиши Backspace?

---

вход:

<input
        type={'text'}
        placeholder={'Search'}
        name={'search'}
        onChange={this.onChange}
        value={this.state.searchTitle}
        style={{
          paddingLeft: 16,
          width: '100%',
          fontFamily: 'tbc',
          marginBottom: 5,
          borderWidth: 0,
        }}
        id={'search-input'}
/>

---

Исходное состояние:

state = {
    searchTitle: '',
    suggestions: fakeServices,
    showSuggestions: false,
    selection: {
      selectionStart: 0,
      selectionEnd: 0
    },
};

---

Функция вызывается при изменении текста:

onChange = (event) => {
    const text = event.target.value;
    const prevTextLength = this.state.searchTitle.length;

    this.setState({
      searchTitle: text,
      selection: {
        selectionStart: 0,
        selectionEnd: 0
      }
    });

    // Searching for suggestions and placing them into the state 
    if (text !== '') {
      const filteredServices = fuse.search(text);
      this.setState({
        showSuggestions: true,
        suggestions: filteredServices,
      });
    } else {
      this.setState({
        showSuggestions: false,
      })
    }

    if (this.state.suggestions.length !== 0 && text.length > prevTextLength) {
      this.setState({
        searchTitle: this.state.suggestions[0].title,
        selection: {
          selectionStart: text.length,
          selectionEnd: this.state.suggestions[0].title.length
        }
      });
    }

    const input = document.getElementById('search-input');

    input.focus();
    input.selectionStart = this.state.selection.selectionStart;
    input.selectionEnd = this.state.selection.selectionEnd;
};

Answer 1

Оказалось, что текст будет выделен, но после этого компонент обновится и выделение исчезнет. Решение состоит в том, чтобы поместить код, отвечающий за выбор, в функцию жизненного цикла componentDidUpdate ():

componentDidUpdate() {
    const input = document.getElementById('search-input');
    input.focus();
    input.selectionStart = this.state.selection.selectionStart;
    input.selectionEnd = this.state.selection.selectionEnd;
}