fix: Popconfirm onVisibleChange trigger twice (#42351)

components/popconfirm/__tests__/index.test.tsx

@@ -158,7 +158,7 @@ describe('Popconfirm', () => {
 
   it('should support onConfirm to return Promise', async () => {
     const confirm = () =>
-      new Promise(res => {
+      new Promise((res) => {
         setTimeout(res, 300);
       });
     const onOpenChange = jest.fn((_, e) => {
@@ -256,7 +256,7 @@ describe('Popconfirm', () => {
           <Popconfirm
             title="will unmount"
             onConfirm={() =>
-              new Promise(resolve => {
+              new Promise((resolve) => {
                 setTimeout(() => {
                   setShow(false);
                   resolve(true);
@@ -286,4 +286,26 @@ describe('Popconfirm', () => {
     // expect(container.textContent).toEqual('Unmounted');
     expect(error).not.toHaveBeenCalled();
   });
+
+  // https://github.com/ant-design/ant-design/issues/42314
+  it('legacy onVisibleChange should only trigger once', async () => {
+    const onOpenChange = jest.fn();
+    const onVisibleChange = jest.fn();
+
+    const { container } = render(
+      <Popconfirm
+        title="will unmount"
+        onOpenChange={onOpenChange}
+        onVisibleChange={onVisibleChange}
+      >
+        <span className="target" />
+      </Popconfirm>,
+    );
+
+    fireEvent.click(container.querySelector('.target')!);
+    await waitFakeTimer();
+
+    expect(onOpenChange).toHaveBeenCalledTimes(1);
+    expect(onVisibleChange).toHaveBeenCalledTimes(1);
+  });
 });

components/popconfirm/index.tsx

@@ -42,6 +42,19 @@ export interface PopconfirmState {
 }
 
 const Popconfirm = React.forwardRef<unknown, PopconfirmProps>((props, ref) => {
+  const {
+    prefixCls: customizePrefixCls,
+    placement = 'top',
+    trigger = 'click',
+    okType = 'primary',
+    icon = <ExclamationCircleFilled />,
+    children,
+    overlayClassName,
+    onOpenChange,
+    onVisibleChange,
+    ...restProps
+  } = props;
+
   const { getPrefixCls } = React.useContext(ConfigContext);
   const [open, setOpen] = useMergedState(false, {
     value: props.open !== undefined ? props.open : props.visible,
@@ -55,8 +68,8 @@ const Popconfirm = React.forwardRef<unknown, PopconfirmProps>((props, ref) => {
     e?: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLDivElement>,
   ) => {
     setOpen(value, true);
-    props.onVisibleChange?.(value, e);
-    props.onOpenChange?.(value, e);
+    onVisibleChange?.(value, e);
+    onOpenChange?.(value, e);
   };
 
   const close = (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -76,7 +89,7 @@ const Popconfirm = React.forwardRef<unknown, PopconfirmProps>((props, ref) => {
     }
   };
 
-  const onOpenChange = (value: boolean) => {
+  const onInternalOpenChange = (value: boolean) => {
     const { disabled = false } = props;
     if (disabled) {
       return;
@@ -84,16 +97,6 @@ const Popconfirm = React.forwardRef<unknown, PopconfirmProps>((props, ref) => {
     settingOpen(value);
   };
 
-  const {
-    prefixCls: customizePrefixCls,
-    placement = 'top',
-    trigger = 'click',
-    okType = 'primary',
-    icon = <ExclamationCircleFilled />,
-    children,
-    overlayClassName,
-    ...restProps
-  } = props;
   const prefixCls = getPrefixCls('popover', customizePrefixCls);
   const prefixClsConfirm = getPrefixCls('popconfirm', customizePrefixCls);
   const overlayClassNames = classNames(prefixClsConfirm, overlayClassName);
@@ -104,7 +107,7 @@ const Popconfirm = React.forwardRef<unknown, PopconfirmProps>((props, ref) => {
       trigger={trigger}
       prefixCls={prefixCls}
       placement={placement}
-      onOpenChange={onOpenChange}
+      onOpenChange={onInternalOpenChange}
       open={open}
       ref={ref}
       overlayClassName={overlayClassNames}