Skip to content

Commit

Permalink
Revert "fix: click on shadowDOM popup should not close it (#480)" (#485)
Browse files Browse the repository at this point in the history
This reverts commit 6414517.
  • Loading branch information
zombieJ authored Sep 10, 2024
1 parent 2e16e23 commit 71c6696
Show file tree
Hide file tree
Showing 3 changed files with 10 additions and 141 deletions.
9 changes: 0 additions & 9 deletions global.d.ts

This file was deleted.

23 changes: 10 additions & 13 deletions src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
)
);
});

Expand Down
119 changes: 0 additions & 119 deletions tests/shadow.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
});

0 comments on commit 71c6696

Please sign in to comment.