Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Controlled numeric input gets cleared when unfocused

See original GitHub issue

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:

Open this sandbox
Type “12.” into the field, with the trailing decimal separator
Unfocus the control
Append “.” to the field’s value to see “12…”
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.

Issue Analytics

State:
Created 4 years ago
Comments:9 (2 by maintainers)

Top GitHub Comments

1reaction

gaearoncommented, Apr 1, 2020

This is probably still a bug.

1reaction

vcanalescommented, Dec 17, 2019

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.

Top Results From Across the Web

In React ES6, why does the input field lose focus after typing a ...

What's happening is this: When your onChange event fires, the callback calls setState with the new title value, which gets passed to your...

React.js loses input focus on typing

I recently stumbled upon an interesting problem. React.js was loosing focus on an input while the user was typing.

React Text Input Losing Focus After Each Keypress

Then click back into the text input. Then type 'o'. Click back into the text input. Then type the final 'o'.

3 ways to autofocus an input in React that ALMOST always work!

Deep dive into the autofocus attribute, the focus() method, the autoFocus prop, the useRef hook and callback refs.

Input validation in Jetpack Compose | by Denis Rudenko

We'll use it's value to control buttons enabled/disabled state in our composable. ... when we get TextField focused/unfocused events from the composable.