Ввод текста размывается после фокусировки в Firefox в React

Question

У меня есть текстовый ввод:

{this.state.showInput 
    && (<input
        type="number"
        min="0"
        max="5"
        onKeyPress={this.onPressKey}
        onChange={this.onChangeHandler}
        onBlur={e => this.revertValue(e)}
        defaultValue={this.props.initialMark}
        ref={this.inputRef}
    />)
}

По умолчанию showInput имеет значение false.И нажимая на кнопку, я делаю:

this.setState({ showInput: true }, () => {
    if (this.inputRef.current)
        this.inputRef.current.focus();
});

И с помощью onBlur я возвращаю значение showInput в значение false:

revertValue(e) {
    e.target.value = this.props.initialMark;
    this.setState({ showInput: false });
}

Проблема заключается в том, почему сразу после запуска onFocus я вижу наразмытие вызвано, поэтому мой ввод не появляется?Как я могу избежать такого поведения?

Это относится только к Firefox.

Answer 1

Эта проблема связана со странным поведением (ошибка другими словами) из <input type="number"> в firefox , а не Реагирует .Firefox запускает onBlur сразу после вызова .focus() для только что созданного элемента с type="number".Конечно, вы можете заменить type="number" на type="text", но это не очень хороший способ решения проблемы.

В зависимости от ситуации (или предпочтений) есть два варианта.

Нажмите здесь, чтобы увидеть демонстрации.

1. Асинхронно .Просто оберните ваш this.inputRef.current.focus(); в setTimeout , вот так setTimeout(() => this.inputRef.current.focus(), 100);.И через 100 мс после того, как вход был создан, этот фокус фокусируется.
2. или синхронно , что я предпочитаю больше.

Для этого случая вам нужно дополнительное свойство всостояние компонента, например initialized: false.

Далее вам нужно установить initialized в true в onBlur обработчике (или revertValue в вашем примере) , этот код будет работать только в Firefox, из-за странного поведения, о котором я писал выше.

if (!this.state.initialized) {
  return this.setState({
    initialized: true,
  });
}

И на последнем шаге вам нужно «сбросить» это свойство для другого браузера, используя этот код после .focus () .Обратите внимание, что это асинхронный вызов.

this.setState(() => ({
  initialized: true,
}));