Regression in a patch release for FieldArray fields and async validation on Field level
aliaksei-chumakou opened this issue · comments
Are you submitting a bug report or a feature request?
bug report
What is the current behavior?
with final-form 4.20.2 there an error when you add record to FieldArray and press Submit button
What is the expected behavior?
with final-form 4.20.1 you can add record to FieldArray and form could be submitted without errors
Sandbox Link
What's your environment?
bug is reproducible in final-form v4.20.2
Other information
The error happens only with async validation on the Field inside of FieldArray.
TypeError: Cannot set property 'validating' of undefined
There is also another warning, that doesn't affect functionality, but I'm not sure if it has any connection to submit error - when you add new record to the ArrayField:
TypeError: Cannot read property 'active' of undefined
Particularly an error happens at that line:
state.fields[name].validating = false
if I change it to state.fields[name] && state.fields[name].validating = false error is gone, but I don't think it's a proper fix
This problem isn't restricted to arrays. I believe I have exactly the same and I'm not using [react-]final-form-arrays, at least not in the reproducing example. Any ideas where I might publish it? (my company doesn't allow CodeSandbox.)
For anyone facing this issue with the following error message : TypeError: Cannot read property 'active' of undefined, without any special async validation with react-final-form.
In my case, the issue was actually not linked to the final-form upgrade (v4.20.1 => v4.20.2) or react-final-form upgrade (v6.5.1 => v6.5.2-3). I rolled back to older versions, but I still had this damn error! When logging the fields state and values, everything was OK up to a certain point, when the fields dictionary just disappears from memory.
Actually you should check how your <Form /> component is rendered. In my case, I had a condition switching between an editable form rendering a couple of Field components, and and a displayable component showing the plain values inside of the form's children nodes. When switching, I guess react-final-form loses references to these nodes and its fields, thus making it impossible to read their values anymore: it becomes undefined probably because the <Form /> component changes, so its references are garbage-collected by the interpreter.
I moved up my editing/displaying state logic to the parent component: it now works like a charm (however, rendering might be a little heavier, but I'd rather have a slightly longer render than a broken form !) Maybe some better qualified users of the react-final-form library could explain how to keep the original form into memory? I am kind of new to this library so my solution could be less than optimal.
Hope this helps other people facing this problem!
Thanks!
Should be fixed with #411