feat: add auto reset form option to use-modal-form hook (#6835)

Co-authored-by: Alican Erdurmaz <alicanerdurmaz@gmail.com>

Author: amulyavarshney

.changeset/cyan-carrots-remain.md

@@ -0,0 +1,9 @@
+---
+"@refinedev/react-hook-form": patch
+"@refinedev/mantine": patch
+"@refinedev/antd": patch
+---
+
+feat: add `autoResetFormWhenClose` option to `useModalForm` hook
+
+Added `autoResetFormWhenClose` prop to reset form when modal closes. Default is `true`.

documentation/docs/packages/react-hook-form/use-modal-form/index.md

@@ -663,6 +663,18 @@ const modalForm = useModalForm({
 });
 ```
 
+### autoResetFormWhenClose
+
+When `true`, form will be reset when modal closes. Defaults to `true`.
+
+```tsx
+const modalForm = useModalForm({
+  modalProps: {
+    autoResetFormWhenClose: false,
+  },
+});
+```
+
 ### warnWhenUnsavedChanges
 
 When you have unsaved changes and try to leave the current page, Refine shows a confirmation modal box. To activate this feature. By default, this feature is disabled.

documentation/docs/ui-integrations/ant-design/hooks/use-modal-form/index.md

@@ -475,6 +475,16 @@ const modalForm = useModalForm({
 });
 ```
 
+### autoResetFormWhenClose
+
+`autoResetFormWhenClose` will reset the form when modal closes. It is `true` by default.
+
+```tsx
+const modalForm = useModalForm({
+  autoResetFormWhenClose: false,
+});
+```
+
 ### warnWhenUnsavedChanges
 
 When set to true, `warnWhenUnsavedChanges` shows a warning when the user tries to leave the page with unsaved changes. It is used to prevent the user from accidentally leaving the page. It is `false` by default

documentation/docs/ui-integrations/mantine/hooks/use-modal-form/index.md

@@ -793,6 +793,18 @@ const modalForm = useModalForm({
 });
 ```
 
+### autoResetFormWhenClose
+
+When `true`, form will be reset when modal closes. It is `true` by default.
+
+```tsx
+const modalForm = useModalForm({
+  modalProps: {
+    autoResetFormWhenClose: false,
+  },
+});
+```
+
 ### syncWithLocation
 
 When `true`, the modals visibility state and the `id` of the record will be synced with the URL. It is `false` by default.

packages/antd/src/hooks/form/useModalForm/useModalForm.ts

@@ -89,6 +89,7 @@ export type UseModalFormProps<
     defaultVisible?: boolean;
     autoSubmitClose?: boolean;
     autoResetForm?: boolean;
+    autoResetFormWhenClose?: boolean;
   };
 /**
  * `useModalForm` hook allows you to manage a form within a modal. It returns Ant Design {@link https://ant.design/components/form/ Form} and {@link https://ant.design/components/modal/ Modal} components props.
@@ -113,6 +114,7 @@ export const useModalForm = <
   defaultVisible = false,
   autoSubmitClose = true,
   autoResetForm = true,
+  autoResetFormWhenClose = true,
   autoSave,
   invalidates,
   ...rest
@@ -291,6 +293,10 @@ export const useModalForm = <
 
     setId?.(undefined);
     sunflowerUseModal.close();
+
+    if (autoResetFormWhenClose) {
+      form.resetFields();
+    }
   }, [warnWhen, autoSaveProps.status]);
 
   const handleShow = useCallback(

packages/mantine/src/hooks/form/useModalForm/index.ts

@@ -74,6 +74,7 @@ export type UseModalFormProps<
     defaultVisible?: boolean;
     autoSubmitClose?: boolean;
     autoResetForm?: boolean;
+    autoResetFormWhenClose?: boolean;
   };
 } & FormWithSyncWithLocationParams;
 
@@ -123,6 +124,7 @@ export const useModalForm = <
     defaultVisible = false,
     autoSubmitClose = true,
     autoResetForm = true,
+    autoResetFormWhenClose = true,
   } = modalProps ?? {};
 
   const {
@@ -277,6 +279,10 @@ export const useModalForm = <
 
     setId?.(undefined);
     close();
+
+    if (autoResetFormWhenClose) {
+      reset();
+    }
   }, [warnWhen, autoSaveProps.status]);
 
   const handleShow = useCallback(

packages/react-hook-form/src/useModalForm/index.spec.ts

@@ -271,4 +271,99 @@ describe("useModalForm Hook", () => {
       undefined,
     );
   });
+
+  it("when 'autoResetFormWhenClose' is true, 'reset' should be called when 'close' is called", async () => {
+    const { result } = renderHook(
+      () =>
+        useModalForm({
+          refineCoreProps: {
+            resource: "posts",
+            action: "create",
+          },
+          modalProps: {
+            autoResetFormWhenClose: true,
+          },
+        }),
+      {
+        wrapper: TestWrapper({}),
+      },
+    );
+
+    await act(async () => {
+      result.current.modal.show();
+      // register values to form
+      result.current.register("test");
+      result.current.setValue("test", "test");
+    });
+
+    await act(async () => {
+      result.current.modal.close();
+    });
+
+    // check if form is reset. (values object should be empty)
+    expect(result.current.getValues()).toStrictEqual({});
+  });
+
+  it("when 'autoResetFormWhenClose' is false, 'reset' should not be called when 'close' is called", async () => {
+    const { result } = renderHook(
+      () =>
+        useModalForm({
+          refineCoreProps: {
+            resource: "posts",
+            action: "create",
+          },
+          modalProps: {
+            autoResetFormWhenClose: false,
+          },
+        }),
+      {
+        wrapper: TestWrapper({}),
+      },
+    );
+
+    await act(async () => {
+      result.current.modal.show();
+      // register values to form
+      result.current.register("test");
+      result.current.setValue("test", "test");
+    });
+
+    await act(async () => {
+      result.current.modal.close();
+    });
+
+    // check if form is not reset. (values object should NOT be empty)
+    expect(result.current.getValues()).toStrictEqual({ test: "test" });
+  });
+
+  it("when 'autoResetFormWhenClose' is true for edit action, 'reset' should be called when 'close' is called", async () => {
+    const { result } = renderHook(
+      () =>
+        useModalForm({
+          refineCoreProps: {
+            resource: "posts",
+            action: "edit",
+            id: "5",
+          },
+          modalProps: {
+            autoResetFormWhenClose: true,
+          },
+        }),
+      {
+        wrapper: TestWrapper({}),
+      },
+    );
+
+    await act(async () => {
+      result.current.modal.show();
+      result.current.register("test");
+      result.current.setValue("test", "test");
+    });
+
+    await act(async () => {
+      result.current.modal.close();
+    });
+
+    expect(result.current.getValues()).toStrictEqual({});
+  });
 });

packages/react-hook-form/src/useModalForm/index.ts

@@ -68,17 +68,21 @@ export type UseModalFormProps<
      * `autoSubmitClose`: Whether the form should be submitted when the modal is closed.
      * 
      * `autoResetForm`: Whether the form should be reset when the form is submitted.
+     * 
+     * `autoResetFormWhenClose`: Whether the form should be reset to defaultValues when the modal is closed.
      * @type `{
       defaultVisible?: boolean;
       autoSubmitClose?: boolean;
       autoResetForm?: boolean;
+      autoResetFormWhenClose?: boolean;
       }`
-     * @default `defaultVisible = false` `autoSubmitClose = true` `autoResetForm = true`
+     * @default `defaultVisible = false` `autoSubmitClose = true` `autoResetForm = true` `autoResetFormWhenClose = true`
      */
   modalProps?: {
     defaultVisible?: boolean;
     autoSubmitClose?: boolean;
     autoResetForm?: boolean;
+    autoResetFormWhenClose?: boolean;
   };
 } & FormWithSyncWithLocationParams;
 
@@ -146,6 +150,7 @@ export const useModalForm = <
     defaultVisible = false,
     autoSubmitClose = true,
     autoResetForm = true,
+    autoResetFormWhenClose = true,
   } = modalProps ?? {};
 
   const useHookFormResult = useForm<
@@ -271,6 +276,10 @@ export const useModalForm = <
 
     setId?.(undefined);
     close();
+
+    if (autoResetFormWhenClose) {
+      reset();
+    }
   }, [warnWhen, autoSaveProps.status]);
 
   const handleShow = useCallback(