final-form / final-form-arrays

Array Mutators for 🏁 Final Form
https://final-form.org/arrays
MIT License
70 stars 40 forks source link

Async validation re-renders all fields #74

Open bostrom opened 2 years ago

bostrom commented 2 years ago

Not sure if this is a Final Form Arrays or a Final Form or Yup issue, but posting it here for initial guidance.

Seems that when I have a form with a FieldArray and async validation (Yup), all empty fields in the array re-renders on each keypress in any other field (even outside the array), even if all subscriptions are disabled.

When comparing the meta information for the rendered component, it seems that meta.errors, meta.invalid and meta.valid changes briefly when typing. Given the field is invalid, the field will briefly turn valid and then invalid again, making it re-render even though nothing actually changed.

Changing the validation to sync resolves the issue.

The following sandbox showcases the issue, and includes a sync validator for comparison.

https://codesandbox.io/s/react-final-form-field-arrays-w-async-validation-nlr1i?file=/index.js

What's your environment?

🏁 Final Form Arrays version 3.0.2 🏁 Final Form version 4.20.2

jaryway commented 2 years ago

May be the same problem!

you need to add validateFields={[]} to all fields in FieldArray and comany field. although,add/remove array item making re-render all fields https://github.com/final-form/react-final-form-arrays/issues/168

https://codesandbox.io/s/new-waterfall-vhlw2?file=/index.js

vvvv