Format/parse leads to uncontrolled input error
See original GitHub issueAre you submitting a bug report or a feature request?
Bug
What is the current behavior?
When you add format and parse to a TextInput Field definition, when you initially enter a value, the first character generates an error:
index.js:2178 Warning: A component is changing an uncontrolled input of type email to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components
in input (created by Input)
in div (created by Input)
in Input (created by WithStyles(Input))
in WithStyles(Input) (created by TextField)
in div (created by FormControl)
in FormControl (created by WithStyles(FormControl))
in WithStyles(FormControl) (created by TextField)
in TextField (at TextInput.js:71)
in TextInput (created by Field)
in Field (at LoginForm.js:28)
What is the expected behavior?
It should not generate an error
Sandbox Link
The bug is also visible on the standard format/parse example.
What’s your environment?
react-final-form 3.4.0 react 16.3.2
Issue Analytics
- State:
- Created 5 years ago
- Comments:5 (1 by maintainers)
Top Results From Across the Web
String to Int in java - Likely bad data, need to avoid exceptions
A formatter is a good idea for parsing raw user input. The problem lies in the implementation. DecimalFormat can incompletely parse input, like ......
Read more >NetSuite Applications Suite - Oracle Help Center
In the Uncontrolled BOM Issuance field, select one of the following options: Do Not Issue – Do not backflush material. Issue Standard Qty...
Read more >3.1.0.BUILD-SNAPSHOT.xml - Spring
@param name the bean name of the advisor {@link ParseState} entry representing an advisor. ... This will lead to a proxy created for...
Read more >Changelog - Chakra UI
Add support for custom format , parse and character validation callbacks. Fix issue where number input doesn't leave the spinning state when ...
Read more >Transforming Systems Engineering through MBSE - DTIC
Example: Output from Terminal/Systems Effects is used as input to CASRED . ... Engineering (DE) Working Group led by the Office of Deputy ......
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
This is not, in fact, a bug, per se, but an understandable source of confusion. I had to deal with this just yesterday when implementing
formatOnBlur
inv3.6.0
. In order to keep the input as “controlled” in React, you cannot give itundefined
, which is what framework-agnostic 🏁 Final Form gives you for not yet defined values. The defaultformat
prop isvalue => value === undefined ? '' : value
.Rather than
You should do:
or, for possibly more “correctness” to catch falsy values:
Make sense? I wonder how this could be better documented. Your confusion is totally understandable.
Anyone, Buehler, Buehler?