Conditional rendering a component that handle validation logic breaks "Save"

[andrico1234]

I create a repro here:

https://github.com/andrico1234/react-admin/tree/bug/validating-repro

It appears that with a new version of react-final-form there's a bug that causes this error: Cannot set property 'validating' of undefined

More details can be found here:
final-form/react-final-form#899

I managed to replicate it in React Admin. If you run the simple demo and navigate to a PostEdit page.

It seems that if you hide a conditionall rendered component, then save, react-final-form gets itself in a jam.

AFAIK, this doesn't happen with all validators, but breaks when using the minValue validator.

Here's a video of it in action

ra-bug.mov

[yossisp]

I'm experiencing the same issue.

[fzaninotto]

Thanks for the report. I understand it's a react-final-form bug that needs to be fixed upstream. I'll keep this issue open until final-form/react-final-form#899 is merged and released.

[Vgor07]

Just do add in case you find it useful, I have followed provided earlier advice to work around this issue. I have added array mutators to my custom mutators, and also added https://github.com/ignatevdev/final-form-submit-errors in the list of mutators. That fixes an issue with the form not being able to open. Forms in my application now open, but the validation appears to be running forever so the save button never actually closes and saves the form. It also completely locks the application from responding to any clicks on menus or anywhere else.

[blamze]

I have related issue
Code snippet

`

                    const amountValidation = [required(), minValue(1)];

                    <BooleanInput source="componentsNeeded" label="Yes" {...props} />
                    {formData?.componentsNeeded && (
                        <ArrayInput source="components" {...props}>
                            <SimpleFormIterator
                            >
                                <NumberInput
                                    source="amount"
                                    defaultValue={1}
                                    validate={amountValidation}
                                />
                            </SimpleFormIterator>
                        </ArrayInput>
                    )}

`

Having full form with data and then disabling componentsNeeded boolean input and saving the form triggers error for NumberInput validation

TypeError: Cannot set property 'validating' of undefined at final-form.es.js:597
final-form.js:597
state.fields[name].validating = false;

Snippet used to work.

[ThieryMichel]

The faulty code in final-form.js:597 is only reached when validator return a Promise.
But composeValidators always return a promise even when not necessary.
#6186 fix composeValidators to stay synchronous when possible.