feat(Overlay): support render overlay in shadow dom (#1869)

Co-authored-by: jinliang.wjl <jinliang.wjl@alibaba-inc.com>

Author: youluna

src/overlay/overlay.jsx

@@ -633,6 +633,45 @@ class Overlay extends Component {
         }
     }
 
+    isInShadowDOM(node) {
+        return node.getRootNode ? node.getRootNode().nodeType === 11 : false;
+    }
+
+    getEventPath(event) {
+        // 参考 https://github.com/spring-media/react-shadow-dom-retarget-events/blob/master/index.js#L29
+        return (
+            event.path ||
+            (event.composedPath && event.composedPath()) ||
+            this.composedPath(event.target)
+        );
+    }
+
+    composedPath(el) {
+        const path = [];
+        while (el) {
+            path.push(el);
+            if (el.tagName === 'HTML') {
+                path.push(document);
+                path.push(window);
+                return path;
+            }
+            el = el.parentElement;
+        }
+    }
+
+    matchInShadowDOM(node, e) {
+        if (this.isInShadowDOM(node)) {
+            // Shadow DOM 环境中，触发点击事件，监听 document click 事件获得的事件源
+            // 并非实际触发的 dom 节点，而是 Shadow DOM 的 host 节点
+            // 进而会导致如 Select 组件的下拉弹层打开后立即关闭等问题
+            // 因此额外增加 node 和 eventPath 的判断
+            const eventPath = this.getEventPath(e);
+            return node === eventPath[0] || node.contains(eventPath[0]);
+        }
+
+        return false;
+    }
+
     handleDocumentClick(e) {
         if (this.state.visible) {
             const { safeNode } = this.props;
@@ -649,6 +688,7 @@ class Overlay extends Component {
                     node &&
                     (node === e.target ||
                         node.contains(e.target) ||
+                        this.matchInShadowDOM(node, e) ||
                         (e.target !== document &&
                             !document.documentElement.contains(e.target)))
                 ) {

test/overlay/index-spec.js

@@ -787,6 +787,35 @@ describe('Popup', () => {
         });
     });
 
+    it('should support render in shadow dom', () => {
+        return co(function*() {
+            const host = document.createElement('div');
+            const shadowRoot = host.attachShadow({ mode: 'open' });
+            document.body.appendChild(host);
+
+            ReactDOM.render((
+                <Popup trigger={<button>Open</button>} triggerType="click">
+                    <span className="content">Hello World From Popup!</span>
+                </Popup>
+            ), shadowRoot);
+
+            yield delay(300);
+            const btn = shadowRoot.querySelector('button');
+            // NOTE: 此处不能使用 ReactTestUtils.Simulate.click(btn);
+            btn.click();
+
+            yield delay(300);
+            assert(document.querySelector('.next-overlay-wrapper'));
+
+            btn.click();
+            yield delay(300);
+            assert(!document.querySelector('.next-overlay-wrapper'));
+
+            ReactDOM.unmountComponentAtNode(shadowRoot);
+            document.body.removeChild(host);
+        });
+    });
+
     // https://riddle.alibaba-inc.com/riddles/b58b48a6
     it('should support container return a react component', () => {
         class App extends React.Component {