fix(ld-tooltip): remove popper in disconnected callback

emdgroup-liquid · Jul 27, 2022 · b59c123 · b59c123
1 parent c921ca7
commit b59c123
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 0 deletions.
diff --git 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
@@ -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: `<ld-tooltip>
+        <h4>Headline</h4>
+        <p>Text content</p>
+      </ld-tooltip>`,
+    })
+
+    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()
+  })
 })