From 849b643cfc91439720c5bb19368386fbc908099c Mon Sep 17 00:00:00 2001
From: Steven Traversi <straversi@berkeley.edu>
Date: Wed, 20 Jul 2022 07:43:47 -0700
Subject: [PATCH] Tooltip: Recalculate target after slotchange (#831)

* Tooltip: Recalculate target after slotchange

The tooltip's positioning breaks after a slotchange, unless the tooltips target is recalculated.

* Update src/components/tooltip/tooltip.test.ts

Co-authored-by: Cory LaViska <cory@abeautifulsite.net>
---
 src/components/tooltip/tooltip.test.ts | 13 +++++++++++++
 src/components/tooltip/tooltip.ts      |  6 +++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/components/tooltip/tooltip.test.ts b/src/components/tooltip/tooltip.test.ts
index f4a21b224..5a36d27d0 100644
--- a/src/components/tooltip/tooltip.test.ts
+++ b/src/components/tooltip/tooltip.test.ts
@@ -134,4 +134,17 @@ describe('<sl-tooltip>', () => {
     expect(afterHideHandler).to.have.been.calledOnce;
     expect(base.hidden).to.be.true;
   });
+
+  it('should recalculate its target when the slotted element changes', async () => {
+    const el = await fixture<SlTooltip>(html`
+      <sl-tooltip content="This is a tooltip" open>
+        <sl-button>Hover me</sl-button>
+      </sl-tooltip>
+    `);
+
+    el.innerHTML = '<sl-button>New element</sl-button>';
+    await el.updateComplete;
+
+    expect(el.getTarget().textContent).to.equal('New element');
+  });
 });
diff --git a/src/components/tooltip/tooltip.ts b/src/components/tooltip/tooltip.ts
index 3dc0d2e20..3c9b10cf3 100644
--- a/src/components/tooltip/tooltip.ts
+++ b/src/components/tooltip/tooltip.ts
@@ -262,6 +262,10 @@ export default class SlTooltip extends LitElement {
     return triggers.includes(triggerType);
   }
 
+  handleSlotChange() {
+    this.target = this.getTarget();
+  }
+
   private startPositioner() {
     this.stopPositioner();
     this.updatePositioner();
@@ -319,7 +323,7 @@ export default class SlTooltip extends LitElement {
   render() {
     return html`
       <div class="tooltip-target" aria-describedby="tooltip">
-        <slot></slot>
+        <slot @slotchange=${this.handleSlotChange}></slot>
       </div>
 
       <div class="tooltip-positioner">