final-form / final-form/react-final-form

Controlled/Uncontrolled warning when using formatOnBlur

Open
#529 7 comments 13 reactions 0 assignees View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.