Nested field with validator gives Maximum update depth exceeded

[mrassili]

Are you submitting a bug report or a feature request?

could be a bug

What is the current behavior?

I have a nested field that when I attach a validator gives this React error with this stack trace
If I remove the validators from the nested fields it works

The code basically looks like this:

                                <Field
                                  renderer={({ value, onChange }) => (
                                  …
                                    <Field
                                      validate={composeValidators(required())}
                                    />
                                    …
                                  )}
                                  id={…}
                                  name={…}
                                  validate={composeValidators(required())}
                                />

Maybe someone can spot the culprit here

Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
    at checkForNestedUpdates (react-dom.development.js?61bb:23093)
    at scheduleUpdateOnFiber (react-dom.development.js?61bb:21164)
    at dispatchAction (react-dom.development.js?61bb:15660)
    at eval (react-final-form.es.js?9cfd:198)
    at eval (final-form.es.js?f3ac:326)
    at notifySubscriber (final-form.es.js?f3ac:400)
    at eval (final-form.es.js?f3ac:417)
    at Array.forEach (<anonymous>)
    at notify (final-form.es.js?f3ac:409)
    at notifyFormListeners (final-form.es.js?f3ac:854)
    at notify (final-form.es.js?f3ac:1091)
    at runValidation (final-form.es.js?f3ac:706)
    at Object.registerField (final-form.es.js?f3ac:1119)
    at register (react-final-form.es.js?9cfd:490)
    at eval (react-final-form.es.js?9cfd:545)
    at commitHookEffectListMount (react-dom.development.js?61bb:19731)
    at commitPassiveHookEffects (react-dom.development.js?61bb:19769)
    at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:237)
    at invokeGuardedCallback (react-dom.development.js?61bb:292)
    at flushPassiveEffectsImpl (react-dom.development.js?61bb:22853)
    at unstable_runWithPriority (scheduler.development.js?3069:653)
    at runWithPriority$1 (react-dom.development.js?61bb:11039)
    at flushPassiveEffects (react-dom.development.js?61bb:22820)
    at performSyncWorkOnRoot (react-dom.development.js?61bb:21737)
    at eval (react-dom.development.js?61bb:11089)
    at unstable_runWithPriority (scheduler.development.js?3069:653)
    at runWithPriority$1 (react-dom.development.js?61bb:11039)
    at flushSyncCallbackQueueImpl (react-dom.development.js?61bb:11084)
    at flushSyncCallbackQueue (react-dom.development.js?61bb:11072)
    at discreteUpdates$1 (react-dom.development.js?61bb:21893)
    at discreteUpdates (react-dom.development.js?61bb:806)
    at dispatchDiscreteEvent (react-dom.development.js?61bb:4168)

What is the expected behavior?

a nested field shouldn't cause infinite loop

Sandbox Link

What's your environment?

React Final Form v6.5.1
Final Form v4.20.0
Chrome
Node v12.14.0

Other information

Similar issue #408 #625

[mrassili]

@erikras do you have any clue on this please?

[tjb042]

@mrassili this may be because of how validation works on Fields in final-form. By default when a field changes it triggers validation on all fields in the form. I'm guessing that could cause a cascade here until update-depth is exceeded.

Fields have a prop called validateFields which is a string array of names of other fields that should be validated when this one validates. If you set this field to an empty array then no other fields will be validated when this one changes. (See: FieldProps). If you set validateFields={[]} on the nested Field does it prevent the exception?

[mrassili]

@tjb042 No it does not. I tried setting validateFields on both nested and parent fields, it didn't work.

I ended up making the fields siblings to avoid this exception