React: input[type='number'] value isn't updated

[youen123]

Do you want to request a feature or report a bug?
bug
What is the current behavior?
when I enter "01" into input[type=number]，I set the value to 1, but it doesn't work. It still show "01"

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

https://codesandbox.io/s/20ywk1x71n

What is the expected behavior?
when I enter "01", it should show "1"

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
15.6.2. I think it should update in "updatewrapper" in https://github.com/facebook/react/blob/master/packages/react-dom/src/client/ReactDOMInput.js.

[gaearon]

@nhunzaker What are your thoughts on this? I'm not actually sure this is a bug.

[oirodolfo]

I guess this is the default behaviour of the input element, not related to React, properly.

https://www.w3.org/TR/2010/WD-html-markup-20101019/input.number.html#input.number.attrs.value

[nhunzaker]

Assuming I'm thinking about this correctly, it looks like the issue is that the value _attribute_ is reporting as "01" when it should be aligned with state.

This is happening because the value attribute gets synced based on node.value here:

https://github.com/facebook/react/blob/8bc0bcabe7505a991e9e40a4b8ad1d3eb9b5723f/packages/react-dom/src/events/ChangeEventPlugin.js#L242-L245

I think this is a bug. To fix it, we'd need to figure out the best way to get props.value at this point. We'd also need to make sure it worked if the value was set in an event callback on blur.

[nhunzaker]

If this is in regard to the value property (what the user sees when they type "01"):

React does not strictly modify the value property on number inputs because it's tricky. User input can be in progress, and different character strings can represent the same value, or be important as a user is typing. It's too easy for React to accidentally take a way a user's input or change it in an unexpected way.

For example:

1. A user starts to type 1.001
2. They make it to 1.
3. The user types 0
4. Converting "1.0" to a number turns it into "1"
5. The user's input is lost as the input reverts back to "1"

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!

[mallchel]

I guess this is the default behaviour of the input element, not related to React, properly.

https://www.w3.org/TR/2010/WD-html-markup-20101019/input.number.html#input.number.attrs.value

I've just run into this problem.
Can you clarify to me why this works with native js and HTML? https://codesandbox.io/s/ecstatic-rosalind-h3u09

[mallchel]

Worth to notice that I can around this weird situation by wrapping parseInt(e.target.value, 10) with String(), and then 01 will update on 1
https://codesandbox.io/s/magical-snow-eih6o