React: input[type='number'] event.target.value changes to empty string when . or , pressed and onChange not emitted when . and , used

[kisickilukasz]

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

What is the current behavior?
onChange event changes value of an input to an empty string when . or , is pressed. Additionally it seems like it doesn't fire onChange after the dot and comma (example 1.234,000) at all
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/7ox8qx2mn1
What is the expected behavior?
value stays as an Integer or as seen by the user 1. should be 1. and not "". Should fire onChange.
Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
React 16 +, Chrome, No

[bohdanbirdie]

Tried to reproduce with the latest version of React(16.5.2) https://codesandbox.io/s/53rm6jjx7k
Seems to be OK, no issues like the one you explained, even in your codesandbox

[sag1v]

Isn't it a matter of localization? (maybe change the lang="" attribute)
chrome and Firefox are behaving different by the way.

[kisickilukasz]

I'm not sure if it's a matter of localization. I'll check that out. For now I've made a video showcasing the problem.
https://www.screencast.com/t/ycl1S3sbf

additional info:
chrome version: Version 69.0.3497.100 (Official Build) (64-bit)
macOS: High Sierra 10.13.6

[kisickilukasz]

lang attr didn't help

[haldarmahesh]

This is not a bug in React but the way native HTML input type number parses the floating numbers.

The behavior in React input is similar to the behavior in the non-react input field.

Refer this example to replicate the same in non-react input field by typing a valid number and then 12..., 4E, 4E.... . Press enter to trigger change event.

You will notice once you input one of the above wrong inputs the change event listener is not triggered.

Here is why this happens?
The inputted number is a valid floating number, if it consists the following:

1. Optionally, a (-) character e.g -1233
2. One or both of the following, in the given order:
   
   
   
   1. One or more characters in range of "0-9"
   
   
   2. Both of the following, exactly in the given order:
      
      
      
      
      
      1. A single FULL STOP character (.)
      
      
      
      2. A series of one or more ASCII digits.
      
      
      
   
   
3. Optionally, exactly in given order
   
   
   
   1. Either a "e" or "E" character
   
   
   2. Optionally, a HYPHEN-MINUS character (-) or PLUS SIGN character (+)
   
   
   3. One or more characters in range of "0-9"
   
   

_Click here for HTML spec reference_

Valid floating numbers
If we follow the above rule few of the valid numbers are:

1. 3455
2. -233
3. -3.33
4. -62.44E
5. -7.4e-45
6. 8E+54

Invalid floating numbers

1. --34
2. -12....
3. -4.23E
4. -52eeeeeEE
5. -3e---
6. -5e....eeeEE

When the input number does not pass the validation it throws error and doesn't trigger the change listener. Refer the above link of the HTML spec.

How to solve this on UI?
One way to provide better feedback to the user, can be to add validation using regex pattern and set the proper error in the state using setState callback and disable the form submission.

[Romanior]

@haldarmahesh indeed this is exactly how native input works 👍
https://codesandbox.io/s/q9wvoq11oq

[aweary]

Yeah, this is behavior that React can't really control.

For some more discussion on this, see: https://github.com/facebook/react/issues/13499, https://github.com/facebook/react/issues/11606, https://github.com/facebook/react/issues/10829

[StanFaas]

It's a Chrome bug. For a workaround you can check my codepen: https://codepen.io/whazam/pen/oOWxPK

[Samin100]

This isn't a bug in React, or Chromium either. While this behavior is sub-optimal, it's behaving as expected. Here's what the HTML spec defines:

The value attribute, if specified and not empty, must have a value that is a valid floating-point number. The value sanitization algorithm is as follows: If the value of the element is not a valid floating-point number, then set it to the empty string instead.

Chromium is simply implementing the HTML spec, and React is accessing the input's value via the input's value attribute. Here's a more in-depth explanation, as well as a potential fix.