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

* 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

* refactor: optimize logic and reset refs based on review

* style: optimize code formatting and naming convention

* fix: prevent modal close when dragging from content to mask

- Use bubbling `onMouseDown` to track if the click originated from the mask.
- Only trigger close in `onClick` if both mousedown and click targets are the wrapper.
- Reset tracking refs when dialog becomes visible to prevent state pollution.
- Remove capture listeners to avoid potential event conflicts.

* fix(Dialog): 移除 maskClosable 条件下不必要的 onClose 存在性检查，确保拖拽行为不会意外触发对话框关闭。同时将相关测试从独立文件合并到主测试文件中以简化结构。

---------

Co-authored-by: zkt <Zhengkangtao@leadigital.cn>

Author: zkt2002

src/Dialog/index.tsx

@@ -110,37 +110,27 @@ const Dialog: React.FC<IDialogPropTypes> = (props) => {
   }
 
   // >>> Content
-  const contentClickRef = useRef(false);
-  const contentTimeoutRef = useRef<ReturnType<typeof setTimeout>>(null);
-
-  // 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;
-    });
-  };
+  const mouseDownOnMaskRef = useRef(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 (wrapperRef.current === e.target && mouseDownOnMaskRef.current) {
         onInternalClose(e);
       }
     };
   }
 
+  function onWrapperMouseDown(e: React.MouseEvent) {
+    mouseDownOnMaskRef.current = e.target === wrapperRef.current;
+  }
+
   // ========================= Effect =========================
   useEffect(() => {
     if (visible) {
+      mouseDownOnMaskRef.current = false;
       setAnimatedVisible(true);
       saveLastOutSideActiveElementRef();
 
@@ -158,14 +148,6 @@ 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,
     ...wrapStyle,
@@ -192,14 +174,13 @@ const Dialog: React.FC<IDialogPropTypes> = (props) => {
         className={clsx(`${prefixCls}-wrap`, wrapClassName, modalClassNames?.wrapper)}
         ref={wrapperRef}
         onClick={onWrapperClick}
+        onMouseDown={onWrapperMouseDown}
         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();
@@ -185,6 +188,30 @@ describe('dialog', () => {
     expect(onClose).not.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>
+    );
+
+    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('renderToBody', () => {
     const container = document.createElement('div');
     document.body.appendChild(container);