fix: ShadowDOM click interactive (#347)

* fix: shadow inner check

* chore: warning info

* test: add test case

Author: zombieJ

docs/demos/shadow.md

@@ -0,0 +1,8 @@
+---
+title: Shadow
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/shadow.tsx"></code>

docs/examples/shadow.tsx

@@ -0,0 +1,75 @@
+/* eslint no-console:0 */
+import Trigger from 'rc-trigger';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import '../../assets/index.less';
+
+const Demo = () => {
+  return (
+    <React.StrictMode>
+      <Trigger
+        arrow
+        // forceRender
+        action="click"
+        popup={
+          <div
+            style={{
+              background: 'yellow',
+              border: '1px solid blue',
+              width: 200,
+              height: 60,
+              opacity: 0.9,
+            }}
+          >
+            Popup
+          </div>
+        }
+        popupStyle={{ boxShadow: '0 0 5px red', position: 'absolute' }}
+        getPopupContainer={(item) => item.parentElement!}
+        popupAlign={{
+          points: ['bc', 'tc'],
+          overflow: {
+            shiftX: 50,
+            adjustY: true,
+          },
+          offset: [0, -10],
+        }}
+        stretch="minWidth"
+        autoDestroy
+      >
+        <span
+          style={{
+            background: 'green',
+            color: '#FFF',
+            paddingBlock: 30,
+            paddingInline: 70,
+            opacity: 0.9,
+            display: 'inline-block',
+            marginLeft: 500,
+            marginTop: 200,
+          }}
+        >
+          Target
+        </span>
+      </Trigger>
+    </React.StrictMode>
+  );
+};
+
+export default () => {
+  React.useEffect(() => {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    host.style.background = 'rgba(255,0,0,0.1)';
+    const shadowRoot = host.attachShadow({
+      mode: 'open',
+      delegatesFocus: false,
+    });
+    const container = document.createElement('div');
+    shadowRoot.appendChild(container);
+
+    createRoot(container).render(<Demo />);
+  }, []);
+
+  return null;
+};

package.json

@@ -46,7 +46,7 @@
     "@types/classnames": "^2.2.10",
     "@types/jest": "^26.0.15",
     "@types/react": "^16.8.19",
-    "@types/react-dom": "^16.8.4",
+    "@types/react-dom": "^18.0.11",
     "cross-env": "^7.0.1",
     "dumi": "^2.1.0",
     "eslint": "^7.0.0",

src/index.tsx

@@ -7,6 +7,7 @@ import useEvent from 'rc-util/lib/hooks/useEvent';
 import useId from 'rc-util/lib/hooks/useId';
 import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
 import isMobile from 'rc-util/lib/isMobile';
+import warning from 'rc-util/lib/warning';
 import * as React from 'react';
 import type { TriggerContextProps } from './context';
 import TriggerContext from './context';
@@ -246,10 +247,13 @@ export function generateTrigger(
 
     const inPopupOrChild = useEvent((ele: any) => {
       const childDOM = targetEle;
+
       return (
         childDOM?.contains(ele) ||
+        (childDOM?.getRootNode() as ShadowRoot)?.host === ele ||
         ele === childDOM ||
         popupEle?.contains(ele) ||
+        (popupEle?.getRootNode() as ShadowRoot)?.host === ele ||
         ele === popupEle ||
         Object.values(subPopupElements.current).some(
           (subPopupEle) => subPopupEle.contains(ele) || ele === subPopupEle,
@@ -497,13 +501,38 @@ export function generateTrigger(
 
         const win = getWin(popupEle);
 
+        const targetRoot = targetEle?.getRootNode();
+
         win.addEventListener('click', onWindowClick);
 
+        // shadow root
+        const inShadow = targetRoot && targetRoot !== targetEle.ownerDocument;
+        if (inShadow) {
+          (targetRoot as ShadowRoot).addEventListener('click', onWindowClick);
+        }
+
+        // Warning if target and popup not in same root
+        if (process.env.NODE_ENV !== 'production') {
+          const popupRoot = popupEle.getRootNode();
+
+          warning(
+            targetRoot === popupRoot,
+            `trigger element and popup element should in same shadow root.`,
+          );
+        }
+
         return () => {
           win.removeEventListener('click', onWindowClick);
+
+          if (inShadow) {
+            (targetRoot as ShadowRoot).removeEventListener(
+              'click',
+              onWindowClick,
+            );
+          }
         };
       }
-    }, [clickToHide, popupEle, mask, maskClosable]);
+    }, [clickToHide, targetEle, popupEle, mask, maskClosable]);
 
     // ======================= Action: Hover ========================
     const hoverToShow = showActions.has('hover');

tests/shadow.test.tsx

@@ -0,0 +1,103 @@
+import { act, fireEvent } from '@testing-library/react';
+import { resetWarned } from 'rc-util/lib/warning';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import Trigger from '../src';
+import { awaitFakeTimer } from './util';
+
+describe('Trigger.Shadow', () => {
+  beforeEach(() => {
+    resetWarned();
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  const Demo: React.FC = (props?: any) => (
+    <>
+      <Trigger
+        action={['click']}
+        popup={<span className="bamboo" />}
+        builtinPlacements={{
+          top: {},
+        }}
+        popupPlacement="top"
+        {...props}
+      >
+        <p className="target" />
+      </Trigger>
+
+      {/* Placeholder element which not related with Trigger */}
+      <div className="little" />
+    </>
+  );
+
+  const renderShadow = (props?: any) => {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+
+    const shadowRoot = host.attachShadow({
+      mode: 'open',
+      delegatesFocus: false,
+    });
+    const container = document.createElement('div');
+    shadowRoot.appendChild(container);
+
+    act(() => {
+      createRoot(container).render(<Demo {...props} />);
+    });
+
+    return shadowRoot;
+  };
+
+  it('popup not in the same shadow', async () => {
+    const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    const shadowRoot = renderShadow();
+
+    await awaitFakeTimer();
+
+    fireEvent.click(shadowRoot.querySelector('.target'));
+
+    await awaitFakeTimer();
+
+    expect(errSpy).toHaveBeenCalledWith(
+      `Warning: trigger element and popup element should in same shadow root.`,
+    );
+    errSpy.mockRestore();
+  });
+
+  it('click in shadow should not close popup', async () => {
+    const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    const shadowRoot = renderShadow({
+      getPopupContainer: (item: HTMLElement) => item.parentElement,
+      autoDestroy: true,
+    });
+
+    await awaitFakeTimer();
+
+    // Click to show
+    fireEvent.click(shadowRoot.querySelector('.target'));
+    await awaitFakeTimer();
+    expect(shadowRoot.querySelector('.bamboo')).toBeTruthy();
+
+    // Click outside to hide
+    fireEvent.click(document.body.firstChild);
+    await awaitFakeTimer();
+    expect(shadowRoot.querySelector('.bamboo')).toBeFalsy();
+
+    // Click to show again
+    fireEvent.click(shadowRoot.querySelector('.target'));
+    await awaitFakeTimer();
+    expect(shadowRoot.querySelector('.bamboo')).toBeTruthy();
+
+    // Click in side shadow to hide
+    fireEvent.click(shadowRoot.querySelector('.little'));
+    await awaitFakeTimer();
+    expect(shadowRoot.querySelector('.bamboo')).toBeFalsy();
+
+    expect(errSpy).not.toHaveBeenCalled();
+    errSpy.mockRestore();
+  });
+});