fix(react-hook-form): resolve modal visibility issue when switching between actions (#7100)

Co-authored-by: Alican Erdurmaz <[email protected]>

Author: AkprasadoP

.changeset/fix-modal-form-action-switching.md

@@ -0,0 +1,5 @@
+---
+"@refinedev/react-hook-form": patch
+---
+
+Fix modal visibility issue when switching between actions in useModalForm hook. The modal now properly shows when switching from edit to create action.

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

@@ -387,4 +387,58 @@ describe("useModalForm Hook", () => {
       title: "default-title",
     });
   });
+
+  it("should handle action switching correctly - modal should show after switching from edit to create", async () => {
+    // This test reproduces the bug described in the issue
+    const { result, rerender } = renderHook(
+      ({ action }: { action: "create" | "edit" }) =>
+        useModalForm({
+          refineCoreProps: {
+            resource: "posts",
+            action,
+          },
+        }),
+      {
+        wrapper: TestWrapper({}),
+        initialProps: { action: "create" as const },
+      },
+    );
+
+    // Step 1: Open create modal - should work
+    await act(async () => {
+      result.current.modal.show();
+    });
+    expect(result.current.modal.visible).toBe(true);
+
+    // Step 2: Close modal
+    await act(async () => {
+      result.current.modal.close();
+    });
+    expect(result.current.modal.visible).toBe(false);
+
+    // Step 3: Switch to edit action
+    rerender({ action: "edit" });
+
+    // Step 4: Open edit modal with ID - should work
+    await act(async () => {
+      result.current.modal.show("5");
+    });
+    expect(result.current.modal.visible).toBe(true);
+
+    // Step 5: Close modal
+    await act(async () => {
+      result.current.modal.close();
+    });
+    expect(result.current.modal.visible).toBe(false);
+
+    // Step 6: Switch back to create action
+    rerender({ action: "create" });
+
+    // Step 7: Try to open create modal again
+    await act(async () => {
+      result.current.modal.show();
+    });
+
+    expect(result.current.modal.visible).toBe(true);
+  });
 });

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

@@ -309,7 +309,7 @@ export const useModalForm = <
         show();
       }
     },
-    [id],
+    [id, action, setId, show],
   );
 
   const title = translate(