fix(Dialog): prevent mask close when dragging from content to mask

- Use event capture to track `mousedown` and `mouseup` on the wrapper
- Ensure close is only triggered when the click action fully occurs on the mask
- Fix issue where dragging from content to mask (e.g. slider or text selection) triggers unintended close
Closes ant-design/ant-design#56348

Author: zkt

src/Dialog/index.tsx

@@ -110,34 +110,43 @@ const Dialog: React.FC<IDialogPropTypes> = (props) => {
   }
 
   // >>> Content
-  const contentClickRef = useRef(false);
-  const contentTimeoutRef = useRef<ReturnType<typeof setTimeout>>(null);
+  const mouseDownOnMaskRef = useRef(false);
+  const mouseUpOnMaskRef = useRef(false);
 
-  // We need record content click in case content popup out of dialog
-  const onContentMouseDown: React.MouseEventHandler = () => {
-    clearTimeout(contentTimeoutRef.current);
-    contentClickRef.current = true;
-  };
 
-  const onContentMouseUp: React.MouseEventHandler = () => {
-    contentTimeoutRef.current = setTimeout(() => {
-      contentClickRef.current = false;
-    });
-  };
 
   // >>> Wrapper
   // Close only when element not on dialog
   let onWrapperClick: (e: React.SyntheticEvent) => void = null;
   if (maskClosable) {
     onWrapperClick = (e) => {
-      if (contentClickRef.current) {
-        contentClickRef.current = false;
-      } else if (wrapperRef.current === e.target) {
+      if (
+        onClose &&
+        wrapperRef.current === e.target &&
+        mouseDownOnMaskRef.current &&
+        mouseUpOnMaskRef.current
+      ) {
         onInternalClose(e);
       }
     };
   }
 
+  function onModulesMouseDownCapture(e: React.MouseEvent) {
+    if (e.target === wrapperRef.current) {
+      mouseDownOnMaskRef.current = true;
+    } else {
+      mouseDownOnMaskRef.current = false;
+    }
+  }
+
+  function onModulesMouseUpCapture(e: React.MouseEvent) {
+    if (e.target === wrapperRef.current) {
+      mouseUpOnMaskRef.current = true;
+    } else {
+      mouseUpOnMaskRef.current = false;
+    }
+  }
+
   // ========================= Effect =========================
   useEffect(() => {
     if (visible) {
@@ -158,13 +167,7 @@ const Dialog: React.FC<IDialogPropTypes> = (props) => {
     }
   }, [visible]);
 
-  // Remove direct should also check the scroll bar update
-  useEffect(
-    () => () => {
-      clearTimeout(contentTimeoutRef.current);
-    },
-    [],
-  );
+
 
   const mergedStyle: React.CSSProperties = {
     zIndex,
@@ -192,14 +195,14 @@ const Dialog: React.FC<IDialogPropTypes> = (props) => {
         className={clsx(`${prefixCls}-wrap`, wrapClassName, modalClassNames?.wrapper)}
         ref={wrapperRef}
         onClick={onWrapperClick}
+        onMouseDownCapture={onModulesMouseDownCapture}
+        onMouseUpCapture={onModulesMouseUpCapture}
         style={mergedStyle}
         {...wrapProps}
       >
         <Content
           {...props}
           isFixedPos={isFixedPos}
-          onMouseDown={onContentMouseDown}
-          onMouseUp={onContentMouseUp}
           ref={contentRef}
           closable={closable}
           ariaId={ariaId}

tests/index.spec.tsx

@@ -173,7 +173,10 @@ describe('dialog', () => {
     const { rerender } = render(<Dialog onClose={onClose} visible />);
 
     // Mask close
-    fireEvent.click(document.querySelector('.rc-dialog-wrap'));
+    const mask = document.querySelector('.rc-dialog-wrap');
+    fireEvent.mouseDown(mask);
+    fireEvent.mouseUp(mask);
+    fireEvent.click(mask);
     jest.runAllTimers();
     expect(onClose).toHaveBeenCalled();
     onClose.mockReset();

tests/mask-closable.spec.tsx

@@ -0,0 +1,91 @@
+
+import React from 'react';
+import { render, fireEvent, act } from '@testing-library/react';
+import Dialog from '../src';
+
+describe('Dialog.MaskClosable', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it('should close when click on mask', () => {
+    const onClose = jest.fn();
+    render(
+      <Dialog visible maskClosable onClose={onClose}>
+        Content
+      </Dialog>
+    );
+
+    act(() => {
+      jest.runAllTimers();
+    });
+
+    const mask = document.querySelector('.rc-dialog-wrap');
+    if (!mask) throw new Error('Mask not found');
+
+    fireEvent.mouseDown(mask);
+    fireEvent.mouseUp(mask);
+    fireEvent.click(mask);
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('should not close when dragging from content to mask', () => {
+    const onClose = jest.fn();
+    const { getByText } = render(
+      <Dialog visible maskClosable onClose={onClose}>
+        Content
+      </Dialog>
+    );
+
+    act(() => {
+      jest.runAllTimers();
+    });
+
+    const content = getByText('Content');
+    const mask = document.querySelector('.rc-dialog-wrap');
+    if (!mask) throw new Error('Mask not found');
+
+    // Simulate mouse down on content
+    fireEvent.mouseDown(content);
+    // Simulate mouse up on mask
+    fireEvent.mouseUp(mask);
+    // Simulate click on mask (since click follows mouseup)
+    fireEvent.click(mask);
+
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it('should not close when dragging from mask to content', () => {
+    const onClose = jest.fn();
+    const { getByText } = render(
+      <Dialog visible maskClosable onClose={onClose}>
+        Content
+      </Dialog>
+    );
+
+    act(() => {
+      jest.runAllTimers();
+    });
+
+    const content = getByText('Content');
+    const mask = document.querySelector('.rc-dialog-wrap');
+    if (!mask) throw new Error('Mask not found');
+
+    // Simulate mouse down on mask
+    fireEvent.mouseDown(mask);
+    // Simulate mouse up on content
+    fireEvent.mouseUp(content);
+    // Simulate click on mask (since click follows mouseup)
+    // Note: In real browser, click event might trigger on the common ancestor or user logic might vary,
+    // but here we simulate what happens if a click event reaches the wrapper.
+    // If we drag from mask to content, the click likely happens on content or common parent.
+    // But if propagation reaches wrapper, we want to ensure it doesn't close.
+    fireEvent.click(mask);
+
+    expect(onClose).not.toHaveBeenCalled();
+  });
+});