FieldArray with Validation Errors

[james-portelli-cko]

Hi guys, was wondering whether someone could help me out with a Formik + Yup issue I'm coming across when using FieldArray.

I have a validation in place implemented using Yup that the min number of elements in the array is 1 and the max is 5, if those bounds are not met an error is raised and i display it to the user.

Normally we would only display errors if a field has been 'touched' but I've noticed with FieldArray that adding/removing (using the FieldArray helpers) does not mark the field as 'touched'.

This causes a problem because if i just render the error without the touched guard, and a use touched any other field within the form (outside of the field array) the error will be displayed.

Here is an example: https://codesandbox.io/s/friendly-mountain-q6s0g?file=/src/App.tsx:2450-2453

All you need to do is type something in the 'Type' field and click outside it.

Any idea on how i can make this work more intuitively?

cc @jaredpalmer