React-final-form: Format/parse leads to uncontrolled input error

[mschipperheyn]

Are 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

Sandbox

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

[mschipperheyn]

Anyone, Buehler, Buehler?

[mschipperheyn]

Anyone, Buehler, Buehler? If anyone wants to say that this is not a bug and I should go to SO, that's fine. But it would be nice to hear a yay or nay

[erikras]

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 in v3.6.0. In order to keep the input as "controlled" in React, you cannot give it undefined, which is what framework-agnostic 🏁 Final Form gives you for not yet defined values. The default format prop is value => value === undefined ? '' : value.

Rather than

format={value => (value ? value.toLowerCase() : value)}

You should do:

format={value => (value ? value.toLowerCase() : '')}

or, for possibly more "correctness" to catch falsy values:

format={value => (value ? value.toLowerCase() : Field.defaultProps.format(value))}

Make sense? I wonder how this could be better documented. Your confusion is totally understandable.

[mschipperheyn]

Thanks. Well, since the issue occurs also on the example. Perhaps implement and add the info there

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.