Fixed validation on stale values

jaredpalmer · Jan 8, 2025 · f798575 · f798575
1 parent 0e0cf9e
commit f798575
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 5 deletions.
diff --git a/.changeset/red-walls-press.md b/.changeset/red-walls-press.md
@@ -0,0 +1,5 @@
+---
+'formik': patch
+---
+
+Fixed validation on stale values
diff --git a/packages/formik/src/Formik.tsx b/packages/formik/src/Formik.tsx
@@ -418,7 +418,12 @@ export function useFormik<Values extends FormikValues = FormikValues>({
         dispatchFn();
       }
     },
-    [props.initialErrors, props.initialStatus, props.initialTouched, props.onReset]
+    [
+      props.initialErrors,
+      props.initialStatus,
+      props.initialTouched,
+      props.onReset,
+    ]
   );
 
   React.useEffect(() => {
@@ -549,7 +554,7 @@ export function useFormik<Values extends FormikValues = FormikValues>({
       const willValidate =
         shouldValidate === undefined ? validateOnBlur : shouldValidate;
       return willValidate
-        ? validateFormWithHighPriority(state.values)
+        ? validateFormWithHighPriority(stateRef.current.values)
         : Promise.resolve();
     }
   );
@@ -560,7 +565,9 @@ export function useFormik<Values extends FormikValues = FormikValues>({
 
   const setValues = useEventCallback(
     (values: React.SetStateAction<Values>, shouldValidate?: boolean) => {
-      const resolvedValues = isFunction(values) ? values(state.values) : values;
+      const resolvedValues = isFunction(values)
+        ? values(stateRef.current.values)
+        : values;
 
       dispatch({ type: 'SET_VALUES', payload: resolvedValues });
       const willValidate =
@@ -595,7 +602,9 @@ export function useFormik<Values extends FormikValues = FormikValues>({
       const willValidate =
         shouldValidate === undefined ? validateOnChange : shouldValidate;
       return willValidate
-        ? validateFormWithHighPriority(setIn(state.values, field, resolvedValue))
+        ? validateFormWithHighPriority(
+            setIn(stateRef.current.values, field, resolvedValue)
+          )
         : Promise.resolve();
     }
   );
@@ -680,7 +689,7 @@ export function useFormik<Values extends FormikValues = FormikValues>({
       const willValidate =
         shouldValidate === undefined ? validateOnBlur : shouldValidate;
       return willValidate
-        ? validateFormWithHighPriority(state.values)
+        ? validateFormWithHighPriority(stateRef.current.values)
         : Promise.resolve();
     }
   );

diff --git a/packages/formik/test/Formik.test.tsx b/packages/formik/test/Formik.test.tsx
@@ -1547,4 +1547,45 @@ describe('<Formik>', () => {
 
     expect(InitialValuesWithNestedObject.content.items[0].cards[0].desc).toEqual('Initial Desc');
   });
+
+  it('Should run validation on actual values when tirggering setFieldTouched after setFieldValue', async () => {
+
+    const validationShema = {
+      validate: jest.fn(() => Promise.resolve({})),
+    }
+
+    render(
+      <Formik
+        initialValues={InitialValues}
+        onSubmit={noop}
+        validationSchema={validationShema}
+      >
+        {formikProps => (
+          <input
+            data-testid="desc-input"
+            value={formikProps.values.name}
+            onChange={e => {
+              formikProps.setFieldValue('name', e.target.value);
+              formikProps.setFieldTouched('name', true);
+            }}
+          />
+        )}
+      </Formik>
+    );
+
+    const input = screen.getByTestId('desc-input');
+
+    fireEvent.change(input, {
+      target: {
+        value: 'New Value',
+      },
+    });
+
+    await waitFor(() => {
+      expect(validationShema.validate).toHaveBeenLastCalledWith(
+        { age: 30, name: 'New Value' },
+        { abortEarly: false, context: { age: 30, name: 'New Value' } }
+      );
+    });
+  });
 });