在React中专注于Firefox后，文本输入模糊

Question

I have a text input:

{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}
    />)
}

By default showInput is false. And with click on a button I do:

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

And with onBlur I revert showInput value to false:

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

The issue is why just after triggering onFocus I see on blur is triggered, so my input doesn't appear? How can I avoid this behavior?

This relates to Firefox only.

Answer 1

This issue is related to the strange behavior (bug in other words) of <input type="number"> in firefox itself rather than React . Firefox triggers onBlur immediately after .focus() was called on the newly created element with type="number" . Of course you can replace a type="number" to the type="text" , but this is not a good way to fix the problem.

Depending on the situation (or preferences) there are two options.

Click here to see demos.

1. Asynchronously . Just wrap your this.inputRef.current.focus(); into setTimeout , like this setTimeout(() => this.inputRef.current.focus(), 100); . And 100 ms after the input was created that input get focused.
2. Or synchronously , which I prefer more.

For this case you need additional property in component state, eg initialized: false .

Next, you need to set initialized to true in onBlur handler (or revertValue in your example) , this code will be working only in firefox, because of strange behavior, about which I wrote above.

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

And at the last step you need to "reset" this property for other browser using this code after .focus() . Notice that this is an asynchronous call.

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