fix(form): onOpenChange fires twice when opening ModalForm (#8311)

* fix(ModalForm): onOpenChange fires twice when opening ModalForm * test(ModalForm): onOpenChange fires twice when opening ModalForm
ant-design · Apr 17, 2024 · f12ef2b · f12ef2b
1 parent 9daed82
commit f12ef2b
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 28 deletions.
diff --git a/packages/form/src/layouts/ModalForm/index.tsx b/packages/form/src/layouts/ModalForm/index.tsx
@@ -7,7 +7,7 @@ import { noteOnce } from 'rc-util/lib/warning';
 import React, {
   useCallback,
   useContext,
-  useEffect,
+  // useEffect,
   useImperativeHandle,
   useMemo,
   useRef,
@@ -55,7 +55,7 @@ export type ModalFormProps<
     visible?: boolean;
 
     /** @name 打开关闭的事件 */
-    onOpenChange?: (visible: boolean) => void;
+    onOpenChange?: (open: boolean) => void;
     /**
      * 不支持 'visible'，请使用全局的 visible
      *
@@ -130,13 +130,14 @@ function ModalForm<T = Record<string, any>, U = Record<string, any>>({
     [formRef.current],
   );
 
-  useEffect(() => {
-    if (open && (propsOpen || propVisible)) {
-      onOpenChange?.(true);
-      onVisibleChange?.(true);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [propVisible, propsOpen, open]);
+  // useMergedState监听了open的变化
+  // useEffect(() => {
+  //   if (open && (propsOpen || propVisible)) {
+  //     onOpenChange?.(true);
+  //     onVisibleChange?.(true);
+  //   }
+  //   // eslint-disable-next-line react-hooks/exhaustive-deps
+  // }, [propVisible, propsOpen, open]);
 
   const triggerDom = useMemo(() => {
     if (!trigger) {
@@ -246,7 +247,9 @@ function ModalForm<T = Record<string, any>, U = Record<string, any>>({
         }}
         afterClose={() => {
           resetFields();
-          setOpen(false);
+          if (open) {
+            setOpen(false);
+          }
           modalProps?.afterClose?.();
         }}
         footer={

diff --git a/tests/form/modalForm.test.tsx b/tests/form/modalForm.test.tsx
@@ -267,25 +267,26 @@ describe('ModalForm', () => {
       await waitForWaitTime(100);
     });
     expect(fn).toBeCalledWith(false);
-    expect(fn).toBeCalledTimes(2);
+    expect(fn).toBeCalledTimes(1); // 关闭只触发一次 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);
-    });
-  });
+  // 如果默认就是 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('📦 reset button will simulate onOpenChange', async () => {
     const fn = vi.fn();
@@ -385,7 +386,7 @@ describe('ModalForm', () => {
     await waitFor(async () => {
       await waitForWaitTime(100);
     });
-    expect(fn).toBeCalledTimes(1);
+    expect(fn).toBeCalledTimes(0);
   });
 
   it('📦 ModalForm support submitter is false', async () => {