final-form
Checkbox fields are not handled correctly
Are you submitting a bug report or a feature request?
bug report
What is the current behavior?
Whenever updating the form container, if the form has a multiple checkbox field, resulting in an array being created for it, it will improperly reset the field/form current values. (It will also reset any other field value if you have it).
Also, if you change anything and then undo your changes, it will have an incorrect dirty state set (in regards to initialValues). Ex: toggle on/off a single checkbox, the dirty state should be false.
The issue can be reproduced here: https://codesandbox.io/s/ovxvw4oknz
Perform any changes in the form, then click on the Click here to improperly reset the form (you might have to click twice) button at the bottom. The button only changes the state of the form container (App component), so it has nothing to do with the form state.
What is the expected behavior?
The form should not be improperly reset, the values should be kept (the same way it happens when you don't have a checkbox/array field, check this other sandbox where I replaced the array:
Sandbox Link
https://codesandbox.io/s/k2y9w503l5
The form now doesn't reset if its container state changes.
What's your environment?
Latest stable final-form and react-final-form
Other information
@erikras I can implement the fix/a fix for this issue, just need some guidance :) Tried to get around the code already, but not sure where to look. TBH I think the "problem" is in the final-form code, but still...
Is there any movement on this? It looks like "touched" and "visited" are not being set correctly for checkboxes as well.
Update, I can explicitly call "onBlur" to trigger the "touched" attribute:
input.onBlur(e);
https://codesandbox.io/s/610qwv6pwr
@gustavovnicius It's a common mistake when using React. The form is being reset because your initialValues have actually changed during render due to a fact that it's an object literal that is created each time you enter render method, thus, having new reference. Save initialValues somewhere (in this, for example) and pass it to form and problem solved.
Hey, guys! I have same issue, but not found any example, how to properly use checkboxes in react-final-form. Please, edit https://codesandbox.io/s/rff-checkbox-touched-7y86h to show how it possible 🙏
Hey @apostololeg, here's the workaround I used in my code: https://codesandbox.io/s/rff-checkbox-touched-z86x8
Checkboxes need to be supplied an initialValue otherwise when the form first loads the value is undefined. Then when you change it to true and then to false its value is false. Since its initalValue was undefined and now the value is false the form will not be pristine.
<Field initialValue={false} label="My Checkbox" name="myCheckbox" type="checkbox" />
