React: onBlur event triggers when trying to set focus on input[type"number"] on conditional rendering in Firefox

[mdekalka]

Do you want to request a feature or report a bug?
Bug
What is the current behavior?
When trying to render input[type="number"] with active focus on click

state = {
    isShown: true,
    value: 0
}
componentDidUpdate() {
    this.input && this.input.focus();
}
//...
render() {
    return (
      <td className="editable">
        {!this.state.isShown ? (
          <input
            type="number"
            ref={(input) => { this.input = input }}
            value={this.state.value}
            onChange={e =>
              this.setState({
                value: e.target.value
              })}
            onBlur={() => {this.setState({ isShown: true })}}
          />
        ) : (
            <span onClick={() => {this.setState({ isShown: false })}}>Click me</span>
          )}
      </td>
    )
}

onBlur event triggers in Firefox, before even focus is set.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem:
Click on name column to render input[type="number"] with active focus(works in Chrome, IE11, Edge, does not in Firefox). Please see live example:
https://codepen.io/piupiupiu/pen/KXXQdb?editors=0010

What is the expected behavior?
After clicking on name column input should appears with active focus

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
React v15.4.2
Firefox v56.0 Win10

I'm not sure if this React issue actually, because I noticed that if you will change input type to text if will works perfectly in Firefox(so the problem related only to input[type="number"])

[gwing33]

I have run into this as well. I don't believe this is related to react. I found several bugs on bugzilla (not sure if they maintain it?), but they are all like 6 months to 4 years old.

Currently, adding the onFocus handler fixes this issue, though it seems like extra overhead.

[nhunzaker]

It is curious to me that adding onFocus would fix the issue. Is it a no-operation handler?

Only reason I ask is that focus and blur get attached at the same time:
https://github.com/facebook/react/blob/master/packages/react-dom/src/events/ReactBrowserEventEmitter.js#L128-L135

I think it's important to know what is different when the onFocus handler is applied.

[mathieuprog]

I have the same problem. Adding onFocus didn't help though for my case. Simply changed number to text for the moment...

[mummybot]

I solved this for our project in a very hacky way: attaching the onBlur event listener via the input ref.

Remove it before changing the input type to number, then using setTimeout to jump out of the js processing thread and reattach the event listener.

render() {
        const step = this.props.step || this.getStep();
        let hasFocusProps;
        !!this.domNode && this.domNode.removeEventListener('blur', this.onBlur);
        if (this.state.hasFocus) {
            hasFocusProps = {
                step,
                type: 'number',
                min: step,
            };
            setTimeout(
                () => {
                    this.domNode.addEventListener('blur', this.onBlur, false);
                },
                100,
            );
        } else {
            hasFocusProps = {
                type: 'text',
            };
        }
        return (
                <input
                    {...hasFocusProps}
                    ref={domNode => this.domNode = domNode}
                    value={this.getCurrentValue()}
                    onChange={this.setValue}
                    onFocus={this.setHasFocus}
                />
        );
    },
    componentWillUnmount() {
        !!this.domNode && this.domNode.removeEventListener('blur', this.onBlur);
    }

[gaearon]

It doesn't seem like there's any strong evidence this is a React issue, rather than a Firefox bug.

If this is something that only happens with React (but doesn't happen with vanilla DOM) please file another issue with a vanilla DOM example demonstrating the issue is specific to React.

Thanks!

[riquito]

Here's the link to track the bug in Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=1057858