"Array mutators not found. You need to provide the mutators from final-form-arrays to your form" is thrown although array mutators are passed

[aquinq]

Are you submitting a bug report or a feature request?

Bug report

What is the current behavior?

I have two routes, each containing a single Form (nothing more). The first Form has no mutators, just an input Field. The second Form is passed arrayMutators to mutators prop for its FieldArray.

When navigating from the first to the second route,

Array mutators not found. You need to provide the mutators from final-form-arrays to your form

is thrown, although the second form is passed arrayMutators.

What is the expected behavior?

The second form renders normally.

What seems to happen

It seems the second form is rendered using the first form ref, returned by useConstant (here) (which is probably the root cause of this issue). Then, useWhenValueChanges is called with mutators (here), which will set the second form mutators config later using a side effect (here). The thing is, when hasMutators boolean is defined (here) the side effect has not run yet.

Sandbox Link

https://codesandbox.io/s/eager-sinoussi-405f2

What's your environment?

React Final Form Arrays 3.1.1

[aquinq]

A workaround is to set a unique key prop to each Form, to make sure the ref used by react-final-form will not be reused to render the other Form.

[mauron85]

Still an issue