HTML5 input browser warnings

[radekmie]

In my render method, I have something like

<input type="email" value={this.state.input} onChange={() => {}} />

If I first render this input - no matter what - browser remains silent. When I call this.setState({input: 'invalid2'}) (or press any with this input focused), it moves cursor at the end and yields a warning:

jsfiddle

This might be related: #6441.

It's happening in 15.1.0, I haven't tested any other version.

Is this expected behavior?

[lionng429]

@radekmie you should read more about Controlled Component. it does not related to #6441

[radekmie]

@lionng429 I've read it. Okay, it might be not related to #6441, but how to fix it? Even if onChange is a normal handler (I've used empty handler because it was quicker), this warning occurs and cursor is moved to the end.

[lionng429]

@radekmie
I cannot reproduce the error with a proper handler here. any info about browser version?

[radekmie]

@lionng429
Now there's no warning on onChange, but it's still present after setState in setTimeout. I've got this warning in Chrome 53.

[jimfb]

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.

[radekmie]

Thanks @jimfb.

[bradwestfall]

Wanted to open this again because there seems to be a difference between React 15.1 and 15.3. In 15.1 a controlled <input type="email"/> field doesn't experience repeated warnings, but in 15.3 it does. Look at these pens that have the exact same code and open devtools - then type random chars into each pen's input

React 15.1: http://codepen.io/bradwestfall/pen/ZOqJKm
React 15.3: http://codepen.io/bradwestfall/pen/RRZJWk

So I guess I'm just wondering if this can be fixed. It's a "chrome thing" but it also appears to be the way react is updating the DOM since they had this solved in a previous version. It's not really a problem for the app, but just super annoying when trying to use the console for meaningful logs and errors

[pgiankoulidis]

Στις 5 Αυγ 2016 19:26, ο χρήστης "Brad Westfall" notifications@github.com
έγραψε:

Wanted to open this again because there seems to be a difference between
React 15.1 and 15.3. In 15.1 a controlled field
doesn't experience repeated warnings, but in 15.3 it does. Look at these
pens that have the exact same code and open devtools - then type random
chars into each pen's input

React 15.1: http://codepen.io/bradwestfall/pen/ZOqJKm
React 15.3: http://codepen.io/bradwestfall/pen/RRZJWk

[image: react]
https://cloud.githubusercontent.com/assets/2272118/17443208/34bcbadc-5aee-11e6-9e7e-edcbd958e9cb.gif

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#6992 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AP96THWoUlT6ELKwgg5BFB2y-MuqWkkzks5qc2QVgaJpZM4IwuvD
.

[radekmie]

@bradwestfall
I've tested almost all versions of React - here are my results.

[bradwestfall]

Thanks @radekmie. But I still don't fully understand. Does this mean a fix is coming or the new behavior is the new status quo?

[radekmie]

Unfortunately I don't know.