From 71c66960c0118f8fce1f0cdfad27dd89482ff62c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Tue, 10 Sep 2024 14:12:13 +0800
Subject: [PATCH] Revert "fix: click on shadowDOM popup should not close it
 (#480)" (#485)

This reverts commit 64145176ee0a4c434bc9e5962e3e67212f90594a.
---
 global.d.ts           |   9 ----
 src/index.tsx         |  23 ++++----
 tests/shadow.test.tsx | 119 ------------------------------------------
 3 files changed, 10 insertions(+), 141 deletions(-)
 delete mode 100644 global.d.ts

diff --git a/global.d.ts b/global.d.ts
deleted file mode 100644
index 0d3572f..0000000
--- a/global.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// global.d.ts
-declare namespace JSX {
-  interface IntrinsicElements {
-    'custom-element': React.DetailedHTMLProps<
-      React.HTMLAttributes<HTMLElement> & { class?: string }, 
-      HTMLElement
-    >;
-  }
-}
diff --git a/src/index.tsx b/src/index.tsx
index 081282c..dce5f96 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -272,23 +272,20 @@ export function generateTrigger(
     const originChildProps = child?.props || {};
     const cloneProps: typeof originChildProps = {};
 
-    const inContainer = (target: Element, container: Element) => {
-      return (
-        target === container ||
-        container.contains(target) ||
-        getShadowRoot(container)?.host === target ||
-        container.contains(getShadowRoot(target)?.host)
-      );
-    };
-
     const inPopupOrChild = useEvent((ele: EventTarget) => {
       const childDOM = targetEle;
-      const eleInContainer = inContainer.bind(null, ele as Element);
 
       return (
-        eleInContainer(childDOM) ||
-        eleInContainer(popupEle) ||
-        Object.values(subPopupElements.current).some(eleInContainer)
+        childDOM?.contains(ele as HTMLElement) ||
+        getShadowRoot(childDOM)?.host === ele ||
+        ele === childDOM ||
+        popupEle?.contains(ele as HTMLElement) ||
+        getShadowRoot(popupEle)?.host === ele ||
+        ele === popupEle ||
+        Object.values(subPopupElements.current).some(
+          (subPopupEle) =>
+            subPopupEle?.contains(ele as HTMLElement) || ele === subPopupEle,
+        )
       );
     });
 
diff --git a/tests/shadow.test.tsx b/tests/shadow.test.tsx
index e2cebf4..b7e0580 100644
--- a/tests/shadow.test.tsx
+++ b/tests/shadow.test.tsx
@@ -198,122 +198,3 @@ describe('Trigger.Shadow', () => {
     errSpy.mockRestore();
   });
 });
-
-describe('Popup.Shadow', () => {
-  beforeEach(() => {
-    resetWarned();
-    jest.useFakeTimers();
-  });
-
-  afterEach(() => {
-    jest.useRealTimers();
-  });
-
-  class CustomElement extends HTMLElement {
-    disconnectedCallback() {}
-    connectedCallback() {
-      const shadowRoot = this.attachShadow({
-        mode: 'open',
-      });
-      const container = document.createElement('div');
-      shadowRoot.appendChild(container);
-      container.classList.add('shadow-container');
-      container.innerHTML = `<div class="shadow-content">Hello World</div>`;
-    }
-  }
-
-  customElements.define('custom-element', CustomElement);
-
-  it('should not close the popup when click the shadow content in the popup element', async () => {
-    const container = document.createElement('div');
-    document.body.appendChild(container);
-
-    act(() => {
-      createRoot(container).render(
-        <>
-          <div className="outer">outer</div>
-          <Trigger
-            action={['click']}
-            autoDestroy
-            popup={<custom-element class="popup" />}
-          >
-            <p className="target" />
-          </Trigger>
-        </>,
-      );
-    });
-
-    await awaitFakeTimer();
-
-    // Click to show
-    fireEvent.click(document.querySelector('.target'));
-    await awaitFakeTimer();
-    expect(document.querySelector('.popup')).toBeTruthy();
-
-    // Click outside to hide
-    fireEvent.mouseDown(document.querySelector('.outer'));
-    await awaitFakeTimer();
-    expect(document.querySelector('.popup')).toBeFalsy();
-
-    // Click to show again
-    fireEvent.click(document.querySelector('.target'));
-    await awaitFakeTimer();
-    expect(document.querySelector('.popup')).toBeTruthy();
-
-    // Click on popup element should not hide
-    fireEvent.mouseDown(document.querySelector('.popup'));
-    await awaitFakeTimer();
-    expect(document.querySelector('.popup')).toBeTruthy();
-
-    // Click on shadow content should not hide
-    const popup = document.querySelector('.popup');
-    fireEvent.mouseDown(popup.shadowRoot.querySelector('.shadow-content'));
-    await awaitFakeTimer();
-    expect(document.querySelector('.popup')).toBeTruthy();
-  });
-
-  it('should works with custom element trigger', async () => {
-    const container = document.createElement('div');
-    document.body.innerHTML = '';
-    document.body.appendChild(container);
-
-    act(() => {
-      createRoot(container).render(
-        <>
-          <div className="outer">outer</div>
-          <Trigger
-            action={['click']}
-            autoDestroy
-            popup={<custom-element class="popup" />}
-          >
-            <custom-element class="target" />
-          </Trigger>
-        </>,
-      );
-    });
-
-    await awaitFakeTimer();
-
-    // Click to show
-    const target = document.querySelector('.target');
-    fireEvent.click(target);
-    await awaitFakeTimer();
-    expect(document.querySelector('.popup')).toBeTruthy();
-
-    // Click outside to hide
-    fireEvent.mouseDown(document.querySelector('.outer'));
-    await awaitFakeTimer();
-    expect(document.querySelector('.popup')).toBeFalsy();
-
-    // Click shadow content to show
-    fireEvent.click(target.shadowRoot.querySelector('.shadow-content'));
-    await awaitFakeTimer();
-    expect(document.querySelector('.popup')).toBeTruthy();
-
-    // Click on shadow content should not hide
-    const popup = document.querySelector('.popup');
-    fireEvent.mouseDown(popup.shadowRoot.querySelector('.shadow-content'));
-    await awaitFakeTimer();
-    expect(document.querySelector('.popup')).toBeTruthy();
-  });
-});