search

final-form / react-final-form

🏁 High performance subscription-based form state management for React
https://final-form.org/react
MIT License
7.39k stars 481 forks source link

6.3.2 vs 6.3.0 breaks radio selection via format prop #683

Open Soundvessel opened 4 years ago

Soundvessel commented 4 years ago

bug report

What is the current behavior?

Radios are setup with "Yes"/"No" values on input but store in FF as true/false boolean using parse/format (see sandbox examples). Clicking the radios applies true/false correctly to FF form state but the actual html inputs are not getting selected since some change that occurred between react-final-form 6.3.0 and 6.3.2.

To clarify the same code (see sandboxes below) works in 6.3.0 triggering clicked state on radios while 6.3.2+ does not. This occurs both when <Field/> generates the input element and when we use a custom component (Reactstrap) in a current project.

What is the expected behavior?

If format function makes true become"Yes" and false become "No" then radios with those matching value props should be selected.

This parse/format pairing technique works in similar fashion with select options parsing strings into numbers and vice verse regardless of react-final-form version so this issue appears to be specific to radios and perhaps the use of more than one <Field/> or input?

Sandbox Link

Example working with 6.3.0. Click the radios and you will see form state storing as true/false and correct Yes/No value radio is shown as selected. https://codesandbox.io/s/react-final-form-parseformat-issue-example-630-works-ighj4?fontsize=14&hidenavigation=1&theme=dark

Example of same code is not working with 6.3.3 Click the radios and while the correct parsed value is being stored in the state the radios themselves no longer are getting checked. https://codesandbox.io/s/react-final-form-parseformat-issue-example-633-not-working-qezez?fontsize=14&hidenavigation=1&theme=dark

6.3.0 works

6.3.2+ broken

What's your environment?

See above sandboxes.

dvanoni commented 4 years ago

I did a little more testing in CodeSandbox, and I think we can narrow this down even further to a change introduced in v6.3.1. It does look like that release included a large number of changes, so we might need to defer to the expertise of @erikras to help us hunt down the issue.

dizlexik commented 4 years ago

This broke for me too. It seems that input.value for boolean values is now undefined instead of true/false. I had to update my code to use input.checked instead, which appears to match what I was getting from input.value previously.

joshf commented 4 years ago

facing same issue and can confirm @dizlexik suggestion fixes the problem for now

Tom5om commented 4 years ago

Facing same issue, but also for checkboxes