Merge pull request #697 from wellyshen/fix/reset-not-working

Fix: `reset` method not working

Author: wellyshen

.changeset/gold-melons-build.md

@@ -0,0 +1,5 @@
+---
+"react-cool-form": patch
+---
+
+fix: `reset` method not working

src/useForm.test.tsx

@@ -2084,14 +2084,18 @@ describe("useForm", () => {
     const value = "🍎";
     fireEvent.input(screen.getByTestId("foo"), { target: { value } });
     await waitFor(() => {
-      expect(onStateChange).toHaveBeenCalledTimes(2);
+      expect(onStateChange).toHaveBeenCalledTimes(3);
       expect(onStateChange).toHaveBeenNthCalledWith(1, {
         ...initialState,
-        values: { foo: value },
+        values: { foo: "" },
       });
       expect(onStateChange).toHaveBeenNthCalledWith(2, {
         ...initialState,
         values: { foo: value },
+      });
+      expect(onStateChange).toHaveBeenNthCalledWith(3, {
+        ...initialState,
+        values: { foo: value },
         dirty: { foo: true },
         isDirty: true,
       });

src/useForm.ts

@@ -113,7 +113,7 @@ export default <V extends FormValues = FormValues>({
     submitCount: 0,
   });
   const { stateRef, setStateRef, observersRef } = useState<V>(
-    initialStateRef.current,
+    { ...initialStateRef.current },
     onStateChange
   );
 

src/useFormState.test.tsx

@@ -12,7 +12,8 @@ interface Props extends FormStateConfig {
   children: (props: any) => JSX.Element;
   path?: Path;
   formDefaultValues?: any;
-  isError?: boolean;
+  errorVal?: string;
+  resetVal?: string;
   isTouched?: boolean;
   callback?: FormStateCallback;
   onRender?: () => void;
@@ -23,13 +24,14 @@ const Form = ({
   formId,
   path,
   formDefaultValues = defaultValues,
-  isError,
+  errorVal,
+  resetVal,
   isTouched,
   callback,
   onRender = () => null,
   ...rest
 }: Props) => {
-  const { form, setError, setTouched } = useForm({
+  const { form, setError, setTouched, reset } = useForm({
     id: formId,
     defaultValues: formDefaultValues,
   });
@@ -39,9 +41,10 @@ const Form = ({
   onRender();
 
   useEffect(() => {
-    if (isError) setError("foo", error);
+    if (errorVal) setError("foo", errorVal);
+    if (resetVal) reset({ foo: resetVal });
     if (isTouched) setTouched("foo");
-  }, [isError, isTouched, setError, setTouched]);
+  }, [errorVal, isTouched, reset, resetVal, setError, setTouched]);
 
   return <form ref={form}>{children(props)}</form>;
 };
@@ -119,6 +122,11 @@ describe("useFormState", () => {
     );
   });
 
+  it("should get reset value correctly", () => {
+    const resetVal = "🍎";
+    expect(renderHelper({ path: "values.foo", resetVal })).toBe(resetVal);
+  });
+
   it("should get state with correct format", () => {
     expect(renderHelper({ path: "values" })).toEqual(defaultValues);
     expect(renderHelper({ path: "values.foo" })).toBe(defaultValues.foo);
@@ -151,7 +159,7 @@ describe("useFormState", () => {
   });
 
   it("should get error with touched", () => {
-    const args = { path: "errors.foo", isError: true };
+    const args = { path: "errors.foo", errorVal: error };
 
     expect(renderHelper(args)).not.toBeUndefined();