final-form / final-form/react-final-form
Controlled/Uncontrolled warning when using formatOnBlur
- Dominant language
- JavaScript
- Stars
- 7.4k
- Forks
- 497
- PR merge metrics
- No merged PRs in 30d
Description
### Are you submitting a **bug report** or a **feature request**?
Bug report. (I think!)
### What is the current behavior?
I use `format` and `formatOnBlur` to trim whitespace from a field when the user leaves it. I know that I must not return `undefined` in `format`.
I get this warning when typing in the field:
> Warning: A component is changing an uncontrolled input of type undefined 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.
### What is the expected behavior?
No warnings!
Note that if I remove `formatOnBlur` the warnings do not appear.
### Sandbox Link
https://codesandbox.io/embed/nervous-williams-k1ldk
### What's your environment?
react-final-form: 6.1.0
final-form: 4.14.1
browser: Tried Chrome and Firefox
### Other information
The code from the sandbox for convenience:
```js
{
console.log("SUBMIT", values);
}}
>
{({ handleSubmit }) => (
value.trim()} formatOnBlur>
{({ input }) => {
return ;
}}
)}
;
```
Also, thank you for this fantastic form solution! :100:
Contributor guide
Assessment
This issue has not been assessed yet.