React: Controlled numeric input gets cleared when unfocused

[kripod]

Do you want to request a feature or report a bug?
I would like to report a bug.

What is the current behavior?
A numeric input field gets cleared accidentally on several occasions.

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:

1. Open this sandbox
2. Type “12.” into the field, with the trailing decimal separator
3. Unfocus the control
4. Append “.” to the field’s value to see “12..”
5. Unfocus the control once again and see that the number has completely disappeared

What is the expected behavior?

Similar to how uncontrolled inputs work (remove the value prop and then repeat the steps above), the input should not be cleared on blur.

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

I’m using React 16.12.0 and experienced the same behavior with the latest version of Chrome and iOS Safari. Regarding this bug, I have no experience with previous versions of React.

[AfterThreeYears]

i think this is HTML Input elememt features, because you input not number, so input well clean content.

[caner-karaman]

This is not React behavior, Its come from browser

[kripod]

This isn't a browser bug. I've just set up a sandbox with the exact same code, but using Preact instead of React: https://codesandbox.io/s/objective-antonelli-o0f2x

Input "12." -> Unfocus -> Append "." -> Unfocus works just fine with Preact, but React clears the input field unintentionally.

[vcanales]

Some investigation led me to 29d9710 which took me here. This is definitely a bug following that logic, and it seems to be related to not checking for special cases of validity in the case of input[type=number] when onBlur happens.

That being said, this issue will go away when the changes made in #13526 are no longer under a feature flag (disableInputAttributeSyncing). I checked this by modifying my copy of react-dom, but you can probably also build react with the flag set to true.

[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!

[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!

[gaearon]

This is probably still a bug.

[gaearon]

Would anyone be interested in adding a fixture for this to fixtures/dom? So we can track this.