react: Number input breaks when letter "e" is entered
Do you want to request a feature or report a bug? bug
What is the current behavior?
input[type=number] only allows entering numbers and letter “e” in the input. Native “input” input event is called for both numbers and the letter “e”. With React the onChange event is only called for numbers. There’s no way to catch “e” with onChange.
The “e” is even being filled when the input is controlled. The only way I can think of to work around this bug right now is to use onKeyDown and preventDefault when “e” or “E” is pressed.
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/ov3ql3ljwz
What is the expected behavior? It should pass anything that is being filled into the input to the onChange handler and should not break controlled component.
Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? React: 16.4.2 Chrome: 68.0.3440.106 Windows 10
About this issue
- Original URL
- State: open
- Created 6 years ago
- Reactions: 13
- Comments: 15 (9 by maintainers)
This is still an issue.
From what I could experiment with your codesandbox, the
onChangeis still being called (with an empty value) for when you type “e”. Additionally, if you type anything after the “e”, it will send the value properly.I believe this is happening because a string ending with “e” is not a valid number (e.g.
12e), but a string with “e” followed by an integer is (e.g.12e2). Remember that12e2is a valid number, as Ende93 pointed out.Notice the
onChangewill be called with an empty value for any other non-number string (e.g.foo), so it looks quite consistent to me.That’s the browser behavior, cause
1e1is also valid-floating-point-number. But if you setinput.value = '1e', React will throw warning and just give empty to input.