diff --git a/src/liquid/components/ld-tooltip/ld-tooltip.tsx b/src/liquid/components/ld-tooltip/ld-tooltip.tsx index a64e995d02..c932c9784a 100644 --- a/src/liquid/components/ld-tooltip/ld-tooltip.tsx +++ b/src/liquid/components/ld-tooltip/ld-tooltip.tsx @@ -256,6 +256,11 @@ export class LdTooltip { this.hasDefaultTrigger = !this.element.querySelector('[slot="trigger"]') } + disconnectedCallback() { + this.popper?.destroy() + this.tooltipRef?.remove() + } + render() { const TriggerTag = this.tag diff --git a/src/liquid/components/ld-tooltip/test/ld-tooltip.spec.ts b/src/liquid/components/ld-tooltip/test/ld-tooltip.spec.ts index d5b507f7e2..aa70ae4e35 100644 --- a/src/liquid/components/ld-tooltip/test/ld-tooltip.spec.ts +++ b/src/liquid/components/ld-tooltip/test/ld-tooltip.spec.ts @@ -411,4 +411,29 @@ describe('ld-tooltip', () => { expect(component.shadowRoot.querySelector('.ld-tether-enabled')).toBe(null) }) + + it('removes popper element on disconnect', async () => { + const page = await newSpecPage({ + components: [LdIcon, LdTooltip, LdTooltipPopper], + html: ` +

Headline

+

Text content

+
`, + }) + + const component = page.root + const trigger = component.shadowRoot.querySelector('.ld-tooltip__trigger') + const defaultSlot = component.shadowRoot.querySelector('.ld-tooltip slot') + + // @ts-ignore + defaultSlot.assignedNodes = () => component.querySelectorAll('> *') + trigger.dispatchEvent(new Event('mouseenter')) + jest.advanceTimersByTime(0) + await page.waitForChanges() + expect(page.body.querySelector('ld-tooltip-popper')).toBeTruthy() + + component.remove() + await page.waitForChanges() + expect(page.body.querySelector('ld-tooltip-popper')).toBeFalsy() + }) })