Skip to content
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/fix-modal-form-action-switching.md
Original file line number Diff line number Diff line change
@@ -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.
54 changes: 54 additions & 0 deletions packages/react-hook-form/src/useModalForm/index.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
});
2 changes: 1 addition & 1 deletion packages/react-hook-form/src/useModalForm/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -309,7 +309,7 @@ export const useModalForm = <
show();
}
},
[id],
[id, action, setId, show],
);

const title = translate(
Expand Down
Loading