Formik: [v2] Regression in validation of FieldArray after change

[simoneb]

🐛 Bug report

Current Behavior

Validation is not run after I push an item to the array.

Expected behavior

In version 1.x, validation was run right away.

Reproducible example

https://codesandbox.io/s/formik-v2-fieldarray-validation-repro-hrqqj

The repro is using Formik v2. You will see that adding new items by clicking the button doesn't trigger validation.

If you downgrade to Formik 1.x you will see that adding an item will trigger validation.

Suggested solution(s)

Revert to the previous behavior or document the breaking change.

[fenech]

Here's another reproducible example using the validate prop: https://codesandbox.io/s/ecstatic-swanson-tz1ih

It looks like the issue is that the second argument to setFormikState (the callback) is never called. https://github.com/jaredpalmer/formik/blob/master/src/FieldArray.tsx#L169

This is because setFormikState only takes one argument. https://github.com/jaredpalmer/formik/blob/master/src/Formik.tsx#L664.

The following test fails:

    it('should validate form after adding the value', async () => {
      let arrayHelpers: any;
      let validate = jest.fn();
      let form = (
        <TestForm validate={validate}>
          <FieldArray
            name="friends"
            render={arrayProps => {
              arrayHelpers = arrayProps;
              return null;
            }}
          />
        </TestForm>
      );

      let { rerender } = render(form);
      arrayHelpers.push('tom');
      rerender(form);
      await wait(() => {
        expect(validate).toHaveBeenCalled();
      });
    });

I forked this repo at https://github.com/nbycomp/formik and added the failing test.

[jrobeson]

why not submit the failing test as a PR?

[schreyerpeter]

I'm experiencing the same issue with validation not running after calling replace on an existing item in the field array.

I forked off your example, @simoneb
https://codesandbox.io/s/formik-v2-fieldarray-validation-repro-eeylg

[jaredpalmer]

I believe this is fixed in 2.1

[simoneb]

@jaredpalmer the behavior has improved in 2.1.1 but it's not the same as it was in 1.x.

See the updated sandbox here: https://codesandbox.io/s/formik-v2-fieldarray-validation-repro-hrqqj

And the screenshots below. Notice that the 2.1.1 version is "falling one field behind". The when I add a new field to the array the previous ones are validated but not the newly added one, whereas in version 1.5.8 the form state was in sync and also the newly added field is being validated at the time it's added.

I would reopen this issue.

1.5.8

2.1.1

[gsaandy]

Looks like the validation is only triggering for push, but not for replace and remove

[pavelspichonak]

@simoneb Any updates?.. The issue is still reproducible

[simoneb]

@pavelspichonak it is still reproducible in 2.1.5. When a new field is added to a field array, its value is not validated. The behavior is the same as in 2.1.1. See screenshot below and updated sandbox.