React: Controlled input with type=email produces console warnings with Chrome 52

[jenanwise]

Do you want to request a _feature_ or report a _bug_?
Bug

What is the current behavior?
Chrome 52 OSX produces console warnings with React-controlled <input type="email"> fields: The specified value "foo" is not a valid email address.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/reactjs/69z2wepo/).

https://jsfiddle.net/mqpad969/

class App extends React.Component {
  constructor() {
    super();
    this.state = {value: ''};
  }

  render() {
    return (
      <input
         type="email"
         value={this.state.value}
         onChange={(event) => this.setState({value: event.target.value})} />
    );
  }
}

What is the expected behavior?

Chrome should not produce warnings.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

OS: OS X 10.11.6
Browser: Chrome 52.0.2743.116
React version: >= 15.2.0, including the current release 15.3.0 and master.

There was an earlier issue, #6992, that was closed. This comment documented it being still an issue, but I did not see any currently-open issues related to this problem.

[nygardk]

Experiencing this with Chrome Version 52.0.2743.116 (64-bit), too.

[aweary]

I think this is going to end up coming down to what @jimfb said about this last time:

Chrome is trying to be smart. They are warning if you set the invalid value outside of the event handler (the idea being, you are getting your 'value' from your app instead of from the user input, so it should be a valid value).

Personally, I think chrome is being overly aggressive with this warning, but that's a design decision. You could file a bug on Chrome if you'd like. Explain your use case, etc.

Regardless, this is not a bug in React, and I don't know of anything we could do to mitigate this issue, so I'm going to close it out.

[jenanwise]

For what it's worth, this doesn't seem to be an issue with React 15.1.0: https://jsfiddle.net/kfhr2may/

[aweary]

@jenanwise I believe it's because of https://github.com/facebook/react/pull/6406. In ReactDOMInput we now manually update node.value in updateWrapper, which is what Chrome seems to be complaining about.

[nhunzaker]

I bumped into this when working on a PR to refactor some DOM input stuff (https://github.com/facebook/react/pull/7474), I believe it's happening in DOMPropertyOperations:

https://github.com/facebook/react/blob/master/src/renderers/dom/shared/DOMPropertyOperations.js#L158

Check out this GIF:

ReactDOMInput.updateWrapper never trips on the node.value assignment because the input's current value is the same. This check doesn't happen inside of DOMPropertyOperations, so it throws a warning.

My PR consolidates a lot of this logic into a custom mutation method for value, which is an aggressive change, but fixes the issue.

[aweary]

Thanks @nhunzaker, I haven't actually run through the code for this yet. Based on #6406 this seems like something we wouldn't explicitly make a change for, but if your PR resolves this as a side effect we can just keep this open until that PRs been reviewed 👍

[jenanwise]

I filed a bug with Chrome here, but would love for a React-based solution if possible.

[phyllisstein]

For what it’s worth, I’m still seeing this in React versions up to and including 15.3.2-rc.1.

[592da]

is it going to be fixed soon ?

[miyukiw]

Chrome 55.0.2883.87 seems to fix this.
Experienced this problem with React 15.4.1 and Chrome 54 . But after updating Chrome to 55.0.2883.87, I can't reproduce it.

[anhkhoi]

Confirmed that this issue isn't happened on chrome 55.0.2883.87

[quicksnap]

Also confirm, Chrome 55.0.2883.95, the warning goes away.