fix(form): 修复openChange打开时不触发问题 (#8403)

* fix(form): onOpenChange not fire when opening ModalForm * test(ModalForm): modify test files
ant-design · May 23, 2024 · 5a1153b · 5a1153b
1 parent d4f921c
commit 5a1153b
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 27 deletions.
diff --git a/packages/form/src/layouts/ModalForm/index.tsx b/packages/form/src/layouts/ModalForm/index.tsx
@@ -7,6 +7,7 @@ import { noteOnce } from 'rc-util/lib/warning';
 import React, {
   useCallback,
   useContext,
+  useEffect,
   useImperativeHandle,
   useMemo,
   useRef,
@@ -129,14 +130,13 @@ function ModalForm<T = Record<string, any>, U = Record<string, any>>({
     [formRef.current],
   );
 
-  // useMergedState监听了open的变化
-  // useEffect(() => {
-  //   if (open && (propsOpen || propVisible)) {
-  //     onOpenChange?.(true);
-  //     onVisibleChange?.(true);
-  //   }
-  //   // eslint-disable-next-line react-hooks/exhaustive-deps
-  // }, [propVisible, propsOpen, open]);
+  useEffect(() => {
+    if (propsOpen || propVisible) {
+      onOpenChange?.(true);
+      onVisibleChange?.(true);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [propVisible, propsOpen]);
 
   const triggerDom = useMemo(() => {
     if (!trigger) {

diff --git a/tests/form/modalForm.test.tsx b/tests/form/modalForm.test.tsx
@@ -267,26 +267,25 @@ describe('ModalForm', () => {
       await waitForWaitTime(100);
     });
     expect(fn).toBeCalledWith(false);
-    expect(fn).toBeCalledTimes(1); // 关闭只触发一次 onOpenChange
+    expect(fn).toBeCalledTimes(2); // 点击触发一次，关闭触发一次 onOpenChange
   });
 
-  // 如果默认就是 open 的 onOpenChange 预期应当不触发
-  // it('📦 modal open=true simulate onOpenChange', async () => {
-  //   const fn = vi.fn();
-  //   render(
-  //     <ModalForm
-  //       open
-  //       trigger={<Button id="new">新建</Button>}
-  //       onOpenChange={(visible) => fn(visible)}
-  //     >
-  //       <ProFormText name="name" />
-  //     </ModalForm>,
-  //   );
-
-  //   await waitFor(() => {
-  //     expect(fn).toBeCalledWith(true);
-  //   });
-  // });
+  it('📦 modal open=true simulate onOpenChange', async () => {
+    const fn = vi.fn();
+    render(
+      <ModalForm
+        open
+        trigger={<Button id="new">新建</Button>}
+        onOpenChange={(visible) => fn(visible)}
+      >
+        <ProFormText name="name" />
+      </ModalForm>,
+    );
+
+    await waitFor(() => {
+      expect(fn).toBeCalledWith(true);
+    });
+  });
 
   it('📦 reset button will simulate onOpenChange', async () => {
     const fn = vi.fn();
@@ -386,7 +385,7 @@ describe('ModalForm', () => {
     await waitFor(async () => {
       await waitForWaitTime(100);
     });
-    expect(fn).toBeCalledTimes(0);
+    expect(fn).toBeCalledTimes(1); // 点击会触发一次onOpenChange
   });
 
   it('📦 ModalForm support submitter is false', async () => {