fix tooltip reconnection; closes #1595

* only show one tooltip in range mode; fixes #1320

* remove unused import

packages/webawesome/docs/docs/resources/changelog.md

@@ -33,6 +33,8 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 - Fixed a bug in `<wa-dialog>` and `<wa-drawer>` that prevented focus from being set on the dialog/drawer when opened [issue:1302]
 - Fixed an overflow style that was causing tab group content to be unnecessarily truncated [issue:1401]
 - Fixed a bug in `<wa-icon>` that caused icon buttons to render when non-text nodes were slotted in [issue:1475]
+- Fixed a bug in `<wa-tooltip>` that prevented tooltips from showing when disconnecting and then reconnecting to the DOM [issue:1595]
+- Modified `<wa-slider>` to only show the tooltip on the handle being dragged when in range mode [issue:1320]
 
 ## 3.0.0-beta.6
 
@@ -476,4 +478,4 @@ Many of these changes and improvements were the direct result of feedback from u
 
 </details>
 
-Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome/discussions)
+Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome/discussions)

packages/webawesome/src/components/slider/slider.ts

@@ -1,6 +1,6 @@
 import type { PropertyValues } from 'lit';
 import { html } from 'lit';
-import { customElement, property, query, queryAll, state } from 'lit/decorators.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { DraggableElement } from '../../internal/drag.js';
 import { clamp } from '../../internal/math.js';
@@ -99,7 +99,6 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
   @query('#thumb-max') thumbMax: HTMLElement;
   @query('#track') track: HTMLElement;
   @query('#tooltip') tooltip: WaTooltip;
-  @queryAll('wa-tooltip') tooltips: NodeListOf<WaTooltip>;
 
   /**
    * The slider's label. If you need to provide HTML in the label, use the `label` slot instead.
@@ -688,19 +687,29 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
   }
 
   private showRangeTooltips() {
-    if (this.withTooltip) {
-      this.tooltips.forEach(tooltip => {
-        tooltip.open = true;
-      });
+    if (!this.withTooltip) return;
+
+    // Show only the active tooltip, hide the other
+    const tooltipMin = this.shadowRoot?.querySelector('#tooltip-thumb-min') as WaTooltip;
+    const tooltipMax = this.shadowRoot?.querySelector('#tooltip-thumb-max') as WaTooltip;
+
+    if (this.activeThumb === 'min') {
+      if (tooltipMin) tooltipMin.open = true;
+      if (tooltipMax) tooltipMax.open = false;
+    } else if (this.activeThumb === 'max') {
+      if (tooltipMax) tooltipMax.open = true;
+      if (tooltipMin) tooltipMin.open = false;
     }
   }
 
   private hideRangeTooltips() {
-    if (this.withTooltip) {
-      this.tooltips.forEach(tooltip => {
-        tooltip.open = false;
-      });
-    }
+    if (!this.withTooltip) return;
+
+    const tooltipMin = this.shadowRoot?.querySelector('#tooltip-thumb-min') as WaTooltip;
+    const tooltipMax = this.shadowRoot?.querySelector('#tooltip-thumb-max') as WaTooltip;
+
+    if (tooltipMin) tooltipMin.open = false;
+    if (tooltipMax) tooltipMax.open = false;
   }
 
   /** Updates the form value submission for range sliders */

packages/webawesome/src/components/tooltip/tooltip.ts

@@ -101,6 +101,11 @@ export default class WaTooltip extends WebAwesomeElement {
   connectedCallback() {
     super.connectedCallback();
 
+    // Recreate event controller if it was aborted
+    if (this.eventController.signal.aborted) {
+      this.eventController = new AbortController();
+    }
+
     // TODO: This is a hack that I need to revisit [Konnor]
     if (this.open) {
       this.open = false;
@@ -113,6 +118,15 @@ export default class WaTooltip extends WebAwesomeElement {
     if (!this.id) {
       this.id = uniqueId('wa-tooltip-');
     }
+
+    // Re-establish anchor connection after being disconnected
+    if (this.for && this.anchor) {
+      this.anchor = null; // force reattach
+      this.handleForChange();
+    } else if (this.for) {
+      // Initial connection
+      this.handleForChange();
+    }
   }
 
   disconnectedCallback() {