html value attribute of input type "number" element is only updated on blur

[mamiu]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
If an input element has the type="number" attribute, the value attribute in the html will only be updated on blur. However, this isn't the case if the input element has the type text.
You can check it here: https://codesandbox.io/s/yk4zrm9pz
(Just open the Developer Tools and have a look at the DOM elements while changing the values.)

Why do I need this?
From react side everything seems to be correct (on the first look). The onChange handler is getting fired and the value is changed when updating it via setState. But if the step attribute is changed during stepping up and down with the browser input arrows or the keyboard arrow keys, then it's not always stepping the correct step value. And that's just because the DOM element doesn't have the correct value in the value attribute.
Here's an example: https://codesandbox.io/s/3ql999xo8p
(Just step down (with the down arrow key) and the up again.)

What is the expected behavior?
The value attribute of the DOM element should also update on change if the input type is number.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
Latest react version (16.4.0)
Tested in Chrome and Firefox on macOS and Windows

[mamiu]

Found a solution to prevent this odd behaviour.
Just add the prop min={0} and then it's working.
But I don't know why. 🙈

[nhunzaker]

Hey @mamiu! Thanks for writing up a great issue. Your examples were very helpful!

This behavior is intentional. There are a host of issues that occur if the value attribute is assigned while a user is inserting text. Most of those involve messing up the cursor position or rounding off/replacing the value in unexpected ways.

The compromise we landed on was to synchronize the value attribute on blur, so that the edge cases could at least be mitigated while a user is interacting with a form (which is super frustrating as a user).

Long term, there is discussion about removing value attribute syncing altogether (#11896). However, until that time, this is a trade-off we make to avoid a lot of issues with number inputs.

Still, your second example is very curious, so I dug a bit deeper....

I pulled the logic out of your example and attempted to recreate it as closely as possible outside of React. The behavior is consistent:

https://codepen.io/nhunzaker/pen/jKywob

It looks like the browser is dynamically calculating a min/max value on the fly. It's really hard to check for this! The only way I could figure out how to report this was to force form validation on every change:

Very very curious! It also makes me believe that this isn't a bug in React, and that this is just a very strange, standard browser behavior.

Unfortunately, I don't think there's anything we can do on the React side, but thank you for sending this in!