Issue with input[type=number] rendering decimal points

[vamsiampolu]

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

I would like to report a bug.

What is the current behavior?

When I use the <input type=number />, there is an issue with it displaying one additional decimal point. I noticed that the initial value in state is 1.2, when I type in a . at the end of the input 1.2. is displayed while the value in state still remains 1.2. When I type in another . at the end, the value disappears and returns an empty string instead.

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 for React 16: https://jsfiddle.net/Luktwrdm/, template for React 15: https://jsfiddle.net/hmbg7e9w/).

Demo: https://www.webpackbin.com/bins/-KzQwHM22gvWWpedlwg0

What is the expected behavior?

The expected behaviour is either that the input performs no built in validation or that the validation is restrictive enough to disallow the second dot, or if the validation cannot be modified, one must ensure that the second dot changes the value back to the value without the second dot.

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

This has affected me in React versions: 15.3 and 15.4, I have not tried this in React 16. I have only tried this in Google Chrome v61 and have not tried this in any of the other browsers.

[skiritsis]

I cannot reproduce this with either React 15.x or React 16.x.

[TryingToImprove]

I can reproduce this with the webpackbin

[skiritsis]

@TryingToImprove This seems to be related with webpackbin. If you put the following line:
console.log(e.target.value); in the "onChange" method, you will notice the value is always an empty string. In fact, if you try to log just the event it throws an exception. If you try the same example on the jsfiddle react template it seems to work ok.

[nhunzaker]

Hey @vamsiampolu! Thanks for the report!

This was a long standing issue with number inputs in Chrome that was fixed by a handful of PRs. All of that work shipped with 15.6.x and 16.x.

Ultimately, there is only so much we can do with number inputs. Invalid numbers report as an empty string and tampering with input validation could cause unexpected behavior. However we think our current solution resolves all of the critical edge cases.

There is nothing we can do about typing "1.2." returning an empty string. The browser fires a change event on the number input and reports the value as "". However newer versions of React respect the user's input, instead of wiping away the value the user sees on the screen.

If there is an edge case we've missed, please let us know! Otherwise feel free to give version 15.6.x or 16.x a shot!

[svagi]

@nhunzaker Correct me if I'm wrong, but it means we are unable to control the state when invalid input is entered?

Example: https://codesandbox.io/s/yw13k4wn19 Try to enter 0, it's not triggering onChange event.

Update: 0, is actually a valid state, but still, it's not triggering onChange event.

[nhunzaker]

@svagi It's triggering a change event for me. I've only tested in FF and Chrome however.

Edit: Your example is correctly triggering from my testing.

[svagi]

@nhunzaker Chrome 63

[nhunzaker]

Update: 0, is actually a valid state, but still, it's not triggering onChange event.

Is it possible that this is a typo, and you mean 0,? I'm unable to type commas into the number input in both OSX and Windows Chrome 63.

But in short, you're correct In Chrome, we can't control invalid values on number inputs because Chrome reports an empty string no matter what.. The input reports "" regardless of if the number is "..." or ".....". If you need to this level of control, I recommend using a text input, which also supports the text selection API, preventing other issues with selection jumping.

[nhunzaker]

It's also possible I just displayed some American ignorance of using commas as decimal places :). I apologize :(.