fix: dialog dont close when mouseDown in content and mouseUp in wrapper (#210)

test: add test

Author: littleee

src/Dialog/Content/index.tsx

@@ -12,7 +12,8 @@ export interface ContentProps extends IDialogChildProps {
   motionName: string;
   ariaId: string;
   onVisibleChanged: (visible: boolean) => void;
-  onClick: React.MouseEventHandler;
+  onMouseDown: React.MouseEventHandler;
+  onMouseUp: React.MouseEventHandler;
 }
 
 export interface ContentRef {
@@ -43,7 +44,8 @@ const Content = React.forwardRef<ContentRef, ContentProps>((props, ref) => {
     ariaId,
     onClose,
     onVisibleChanged,
-    onClick,
+    onMouseDown,
+    onMouseUp,
     mousePosition,
   } = props;
 
@@ -145,7 +147,8 @@ const Content = React.forwardRef<ContentRef, ContentProps>((props, ref) => {
           ref={motionRef}
           style={{ ...motionStyle, ...style, ...contentStyle }}
           className={classNames(prefixCls, className, motionClassName)}
-          onClick={onClick}
+          onMouseDown={onMouseDown}
+          onMouseUp={onMouseUp}
         >
           <div tabIndex={0} ref={sentinelStartRef} style={sentinelStyle} aria-hidden="true" />
           <MemoChildren visible={visible}>

src/Dialog/index.tsx

@@ -93,22 +93,25 @@ export default function Dialog(props: IDialogChildProps) {
   const contentTimeoutRef = useRef<number>();
 
   // We need record content click incase content popup out of dialog
-  const onContentClick: React.MouseEventHandler = () => {
+  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 &&
+      if(contentClickRef.current) {
+        contentClickRef.current = false;
+      } else if (
         !contains(contentRef.current.getDOM(), e.target as HTMLElement)
       ) {
         onInternalClose(e);
@@ -174,7 +177,8 @@ export default function Dialog(props: IDialogChildProps) {
       >
         <Content
           {...props}
-          onClick={onContentClick}
+          onMouseDown={onContentMouseDown}
+          onMouseUp={onContentMouseUp}
           ref={contentRef}
           closable={closable}
           ariaId={ariaIdRef.current}

tests/portal.spec.tsx

@@ -33,7 +33,27 @@ describe('Dialog.Portal', () => {
       jest.runAllTimers();
     });
 
+    wrapper.find('.rc-dialog-content').simulate('mousedown');
     wrapper.find('.rc-select-item-option-content').simulate('click');
+    wrapper.find('.rc-dialog-content').simulate('mouseup');
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it('dialog dont close when mouseDown in content and mouseUp in wrap', () => {
+    const onClose = jest.fn();
+
+    const wrapper = mount(
+      <Dialog onClose={onClose} visible>
+        content
+      </Dialog>,
+    );
+
+    act(() => {
+      jest.runAllTimers();
+    });
+
+    wrapper.find('.rc-dialog-content').simulate('mousedown');
+    wrapper.find('.rc-dialog-wrap').simulate('mouseup');
     expect(onClose).not.toHaveBeenCalled();
   });
 });