Revert "fix: click on shadowDOM popup should not close it (#480)" (#485)

This reverts commit 6414517.
react-component · Sep 10, 2024 · 71c6696 · 71c6696
1 parent 2e16e23
commit 71c6696
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 141 deletions.
diff --git a/global.d.ts b/global.d.ts
diff --git 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
@@ -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();
- });
-});