From 317d65397b8c624d08eafe3a012483d210461b86 Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Sun, 11 Oct 2020 20:18:02 +0800
Subject: [PATCH 1/2] fix: Portal event popup

---
 examples/ant-design.tsx |  8 +++++++-
 package.json            |  1 +
 src/Dialog/Content.tsx  |  3 +++
 src/Dialog/index.tsx    | 21 ++++++++++++++++++++-
 4 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/examples/ant-design.tsx b/examples/ant-design.tsx
index f7c02103..b4679296 100644
--- a/examples/ant-design.tsx
+++ b/examples/ant-design.tsx
@@ -1,6 +1,8 @@
 /* eslint no-console:0 */
 import '../assets/index.less';
 import * as React from 'react';
+import Select from 'rc-select';
+import 'rc-select/assets/index.less';
 import Dialog from '../src/DialogWrap';
 
 const clearPath =
@@ -133,7 +135,11 @@ const MyControl = () => {
       <button type="button" onClick={toggleCloseIcon}>
         use custom icon, is using icon: {(useIcon && 'true') || 'false'}.
       </button>
-      <div style={{ height: 200 }} />
+      <div style={{ height: 200 }}>
+        <Select dropdownStyle={{ zIndex: 9999999 }}>
+          <Select.Option value="light">Light</Select.Option>
+        </Select>
+      </div>
     </Dialog>
   );
 
diff --git a/package.json b/package.json
index 132ccf9e..78da623c 100644
--- a/package.json
+++ b/package.json
@@ -69,6 +69,7 @@
     "np": "^6.4.0",
     "prettier": "^2.1.1",
     "rc-drawer": "4.1.0",
+    "rc-select": "^11.4.1",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "react-draggable": "^4.4.3",
diff --git a/src/Dialog/Content.tsx b/src/Dialog/Content.tsx
index 727130b9..b4979edf 100644
--- a/src/Dialog/Content.tsx
+++ b/src/Dialog/Content.tsx
@@ -11,6 +11,7 @@ export interface ContentProps extends IDialogChildProps {
   motionName: string;
   ariaId: string;
   onVisibleChanged: (visible: boolean) => void;
+  onClick: React.MouseEventHandler;
 }
 
 export interface ContentRef {
@@ -41,6 +42,7 @@ const Content = React.forwardRef<ContentRef, ContentProps>((props, ref) => {
     ariaId,
     onClose,
     onVisibleChanged,
+    onClick,
     mousePosition,
   } = props;
 
@@ -142,6 +144,7 @@ const Content = React.forwardRef<ContentRef, ContentProps>((props, ref) => {
           ref={motionRef}
           style={{ ...motionStyle, ...style, ...contentStyle }}
           className={classNames(prefixCls, className, motionClassName)}
+          onClick={onClick}
         >
           <div tabIndex={0} ref={sentinelStartRef} style={sentinelStyle} aria-hidden="true" />
           {modalRender ? modalRender(content) : content}
diff --git a/src/Dialog/index.tsx b/src/Dialog/index.tsx
index 412c9fdd..c1338ab1 100644
--- a/src/Dialog/index.tsx
+++ b/src/Dialog/index.tsx
@@ -88,12 +88,29 @@ export default function Dialog(props: IDialogChildProps) {
     onClose?.(e);
   }
 
+  // >>> Content
+  const contentClickRef = useRef(false);
+  const contentTimeoutRef = useRef<number>();
+
+  // We need record content click incase content popup out of dialog
+  const onContentClick: React.MouseEventHandler = () => {
+    clearTimeout(contentTimeoutRef.current);
+    contentClickRef.current = true;
+
+    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 (!contains(contentRef.current.getDOM(), e.target as HTMLElement)) {
+      if (
+        !contentClickRef.current &&
+        !contains(contentRef.current.getDOM(), e.target as HTMLElement)
+      ) {
         onInternalClose(e);
       }
     };
@@ -126,6 +143,7 @@ export default function Dialog(props: IDialogChildProps) {
   useEffect(
     () => () => {
       switchScrollingEffect();
+      clearTimeout(contentTimeoutRef.current);
     },
     [],
   );
@@ -156,6 +174,7 @@ export default function Dialog(props: IDialogChildProps) {
       >
         <Content
           {...props}
+          onClick={onContentClick}
           ref={contentRef}
           closable={closable}
           ariaId={ariaIdRef.current}

From 7595921d7def5d5a1f434ae1b0a0e486f7ed3dc6 Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Sun, 11 Oct 2020 20:23:13 +0800
Subject: [PATCH 2/2] test: Add test case

---
 tests/portal.spec.tsx | 39 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 tests/portal.spec.tsx

diff --git a/tests/portal.spec.tsx b/tests/portal.spec.tsx
new file mode 100644
index 00000000..136bc321
--- /dev/null
+++ b/tests/portal.spec.tsx
@@ -0,0 +1,39 @@
+/* eslint-disable react/no-render-return-value, max-classes-per-file, func-names, no-console */
+import React from 'react';
+import Select from 'rc-select';
+import { act } from 'react-dom/test-utils';
+import { mount } from 'enzyme';
+import Dialog from '../src';
+
+/**
+ * Since overflow scroll test need a clear env which may affect by other test.
+ * Use a clean env instead.
+ */
+describe('Dialog.Portal', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it('event should bubble', () => {
+    const onClose = jest.fn();
+
+    const wrapper = mount(
+      <Dialog onClose={onClose} visible>
+        <Select virtual={false} open>
+          <Select.Option value="bamboo">Bamboo</Select.Option>
+        </Select>
+      </Dialog>,
+    );
+
+    act(() => {
+      jest.runAllTimers();
+    });
+
+    wrapper.find('.rc-select-item-option-content').simulate('click');
+    expect(onClose).not.toHaveBeenCalled();
+  });
+});