fix: validation of nested fields with validateField (#3783)

* Fix validation of nested fields with validateField * chore: add changeset --------- Co-authored-by: Jan Sedloň <jansedlon@icloud.com> Co-authored-by: Jared Palmer <jared@jaredpalmer.com>
jaredpalmer · May 26, 2023 · 35fa4cc · 35fa4cc · vercel · May 26, 2023
1 parent 9c75a9f
commit 35fa4cc
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 1 deletion.
diff --git a/.changeset/ten-cups-film.md b/.changeset/ten-cups-film.md
@@ -0,0 +1,5 @@
+---
+'formik': patch
+---
+
+Fix validation of deep.dot.path field references when using the `validateField` API.
diff --git a/packages/formik/src/Formik.tsx b/packages/formik/src/Formik.tsx
@@ -513,7 +513,7 @@ export function useFormik<Values extends FormikValues = FormikValues>({
         .then((error: any) => {
           dispatch({
             type: 'SET_FIELD_ERROR',
-            payload: { field: name, value: error[name] },
+            payload: { field: name, value: getIn(error, name) },
           });
           dispatch({ type: 'SET_ISVALIDATING', payload: false });
         });

diff --git a/packages/formik/test/Field.test.tsx b/packages/formik/test/Field.test.tsx
@@ -425,6 +425,24 @@ describe('Field / FastField', () => {
         );
       }
     );
+
+    cases('constructs error for a nested field when validateField is called', async (renderField) => {
+      const validationSchema = Yup.object({
+        user: Yup.object().shape({
+          name: Yup.string().required('required')
+        })
+      });
+
+      const { getFormProps, rerender } = renderField({}, { validationSchema });
+
+      rerender();
+
+      act(() => {
+        getFormProps().validateField('user.name');
+      })
+
+      await waitFor(() => expect(getFormProps().errors).toEqual({ user: { name: 'required' }}));
+    })
   });
 
   describe('warnings', () => {