refactor: Tooltip controller

Code restructure and internal event listeners state
are now handled with AbortController

Author: rkaraivanov

src/components/tooltip/tooltip-event-controller.ts

@@ -1,27 +1,28 @@
 import type { ReactiveController } from 'lit';
-import { getElementByIdFromRoot } from '../common/util.js';
+import { getElementByIdFromRoot, isString } from '../common/util.js';
 import service from './tooltip-service.js';
 import type IgcTooltipComponent from './tooltip.js';
 
-type TooltipAnchor = Element | null | undefined;
-
-type TooltipCallbacks = {
-  onShow: (event?: Event) => unknown;
-  onHide: (event?: Event) => unknown;
-  onEscape: (event?: Event) => unknown;
-};
-
 class TooltipController implements ReactiveController {
+  //#region Internal properties and state
+
   private readonly _host: IgcTooltipComponent;
-  private _anchor: TooltipAnchor;
-  private _isTransientAnchor = false;
+  private readonly _options: TooltipCallbacks;
+
+  private _hostAbortController: AbortController | null = null;
+  private _anchorAbortController: AbortController | null = null;
 
-  private _options: TooltipCallbacks;
   private _showTriggers = new Set(['pointerenter']);
   private _hideTriggers = new Set(['pointerleave', 'click']);
 
+  private _anchor: TooltipAnchor;
+  private _isTransientAnchor = false;
   private _open = false;
 
+  //#endregion
+
+  //#region Public properties
+
   /** Whether the tooltip is in shown state. */
   public get open(): boolean {
     return this._open;
@@ -52,26 +53,6 @@ class TooltipController implements ReactiveController {
     return this._anchor;
   }
 
-  /**
-   * Removes all triggers from the previous `anchor` target and rebinds the current
-   * sets back to the new value if it exists.
-   */
-  public setAnchor(value: TooltipAnchor, transient = false): void {
-    if (this._anchor === value) return;
-
-    this._dispose();
-    this._anchor = value;
-    this._isTransientAnchor = transient;
-
-    for (const each of this._showTriggers) {
-      this._anchor?.addEventListener(each, this);
-    }
-
-    for (const each of this._hideTriggers) {
-      this._anchor?.addEventListener(each, this);
-    }
-  }
-
   /**
    * Returns the current set of hide triggers as a comma-separated string.
    */
@@ -87,13 +68,9 @@ class TooltipController implements ReactiveController {
    * set of triggers from it and rebind it with the new one.
    */
   public set hideTriggers(value: string) {
-    const triggers = parseTriggers(value);
-
-    if (this._anchor) {
-      this._toggleTriggers(this._hideTriggers, triggers);
-    }
-
-    this._hideTriggers = triggers;
+    this._hideTriggers = parseTriggers(value);
+    this._removeAnchorListeners();
+    this._addAnchorListeners();
   }
 
   /**
@@ -111,66 +88,128 @@ class TooltipController implements ReactiveController {
    * set of triggers from it and rebind it with the new one.
    */
   public set showTriggers(value: string) {
-    const triggers = parseTriggers(value);
-
-    if (this._anchor) {
-      this._toggleTriggers(this._showTriggers, triggers);
-    }
-
-    this._showTriggers = triggers;
+    this._showTriggers = parseTriggers(value);
+    this._removeAnchorListeners();
+    this._addAnchorListeners();
   }
 
+  //#endregion
+
   constructor(tooltip: IgcTooltipComponent, options: TooltipCallbacks) {
     this._host = tooltip;
     this._options = options;
     this._host.addController(this);
   }
 
-  public resolveAnchor(value: Element | string | undefined): void {
-    const resolvedAnchor =
-      typeof value === 'string'
-        ? getElementByIdFromRoot(this._host, value)
-        : (value ?? null);
+  //#region Internal event listeners state
+
+  private _addAnchorListeners(): void {
+    if (!this._anchor) return;
+
+    this._anchorAbortController = new AbortController();
+    const signal = this._anchorAbortController.signal;
+
+    for (const each of this._showTriggers) {
+      this._anchor.addEventListener(each, this, { passive: true, signal });
+    }
 
-    this.setAnchor(resolvedAnchor);
+    for (const each of this._hideTriggers) {
+      this._anchor.addEventListener(each, this, { passive: true, signal });
+    }
+  }
+
+  private _removeAnchorListeners(): void {
+    this._anchorAbortController?.abort();
+    this._anchorAbortController = null;
   }
 
   private _addTooltipListeners(): void {
-    this._host.addEventListener('pointerenter', this, { passive: true });
-    this._host.addEventListener('pointerleave', this, { passive: true });
+    this._hostAbortController = new AbortController();
+    const signal = this._hostAbortController.signal;
+
+    this._host.addEventListener('pointerenter', this, {
+      passive: true,
+      signal,
+    });
+    this._host.addEventListener('pointerleave', this, {
+      passive: true,
+      signal,
+    });
   }
 
   private _removeTooltipListeners(): void {
-    this._host.removeEventListener('pointerenter', this);
-    this._host.removeEventListener('pointerleave', this);
+    this._hostAbortController?.abort();
+    this._hostAbortController = null;
   }
 
-  private _toggleTriggers(previous: Set<string>, current: Set<string>): void {
-    for (const each of previous) {
-      this._anchor?.removeEventListener(each, this);
-    }
+  //#endregion
 
-    for (const each of current) {
-      this._anchor?.addEventListener(each, this, { passive: true });
+  //#region Event handlers
+
+  private _handleTooltipEvent(event: Event): void {
+    switch (event.type) {
+      case 'pointerenter':
+        this._options.onShow.call(this._host);
+        break;
+      case 'pointerleave':
+        this._options.onHide.call(this._host);
     }
   }
 
-  private _dispose(): void {
-    for (const each of this._showTriggers) {
-      this._anchor?.removeEventListener(each, this);
+  private _handleAnchorEvent(event: Event): void {
+    if (!this._open && this._showTriggers.has(event.type)) {
+      this._options.onShow.call(this._host);
     }
 
-    for (const each of this._hideTriggers) {
-      this._anchor?.removeEventListener(each, this);
+    if (this._open && this._hideTriggers.has(event.type)) {
+      this._options.onHide.call(this._host);
+    }
+  }
+
+  /** @internal */
+  public handleEvent(event: Event): void {
+    if (event.target === this._host) {
+      this._handleTooltipEvent(event);
+    } else if (event.target === this._anchor) {
+      this._handleAnchorEvent(event);
     }
+  }
+
+  //#endregion
 
+  private _dispose(): void {
+    this._removeAnchorListeners();
     this._anchor = null;
   }
 
+  //#region Public API
+
+  /**
+   * Removes all triggers from the previous `anchor` target and rebinds the current
+   * sets back to the new value if it exists.
+   */
+  public setAnchor(value: TooltipAnchor, transient = false): void {
+    if (this._anchor === value) return;
+
+    this._removeAnchorListeners();
+    this._anchor = value;
+    this._isTransientAnchor = transient;
+    this._addAnchorListeners();
+  }
+
+  public resolveAnchor(value: Element | string | undefined): void {
+    this.setAnchor(
+      isString(value) ? getElementByIdFromRoot(this._host, value) : value
+    );
+  }
+
+  //#endregion
+
+  //#region ReactiveController interface
+
   /** @internal */
   public hostConnected(): void {
-    const anchor = this._host.anchor;
-    this.resolveAnchor(anchor);
+    this.resolveAnchor(this._host.anchor);
   }
 
   /** @internal */
@@ -180,33 +219,7 @@ class TooltipController implements ReactiveController {
     service.remove(this._host);
   }
 
-  /** @internal */
-  public handleEvent(event: Event): void {
-    // Tooltip handlers
-    if (event.target === this._host) {
-      switch (event.type) {
-        case 'pointerenter':
-          this._options.onShow.call(this._host);
-          break;
-        case 'pointerleave':
-          this._options.onHide.call(this._host);
-          break;
-        default:
-          return;
-      }
-    }
-
-    // Anchor handlers
-    if (event.target === this._anchor) {
-      if (this._showTriggers.has(event.type) && !this._open) {
-        this._options.onShow.call(this._host);
-      }
-
-      if (this._hideTriggers.has(event.type) && this._open) {
-        this._options.onHide.call(this._host);
-      }
-    }
-  }
+  //#endregion
 }
 
 function parseTriggers(string: string): Set<string> {
@@ -219,3 +232,11 @@ export function addTooltipController(
 ): TooltipController {
   return new TooltipController(host, options);
 }
+
+type TooltipAnchor = Element | null | undefined;
+
+type TooltipCallbacks = {
+  onShow: (event?: Event) => unknown;
+  onHide: (event?: Event) => unknown;
+  onEscape: (event?: Event) => unknown;
+};

src/components/tooltip/tooltip.ts

@@ -428,7 +428,7 @@ export default class IgcTooltipComponent extends EventEmitterMixin<
         shift
       >
         <div ${ref(this._containerRef)} part="base">
-          <slot>${this.message ? html`${this.message}` : nothing}</slot>
+          <slot>${this.message}</slot>
           ${this.sticky
             ? html`
                 <slot name="close-button" @click=${this._setAutoHide}>

stories/tooltip.stories.ts

@@ -536,48 +536,29 @@ export const DynamicTooltip: Story = {
 
 export const SharedTooltipMultipleAnchors: Story = {
   render: () => {
-    const tooltipId = 'shared-tooltip';
-
-    setTimeout(() => {
-      const tooltip = document.getElementById(tooltipId) as any;
-      const elementTooltip = document.querySelector(
-        'igc-tooltip:not([id])'
-      ) as any;
-      const elementButton = document.getElementById('elementButton');
-
-      // Set anchor for second tooltip dynamically
-      if (elementTooltip && elementButton) {
-        elementTooltip.anchor = elementButton;
-        elementTooltip.show();
-      }
-
-      document.querySelectorAll('.tooltip-trigger').forEach((btn) => {
-        btn.addEventListener('click', async () => {
-          tooltip.show(btn);
-        });
-      });
-    });
-
     return html`
       <div style="display: flex; gap: 1rem; margin-bottom: 2rem;">
         <igc-button id="first">Default Anchor</igc-button>
-        <igc-button class="tooltip-trigger">Transient 1</igc-button>
-        <igc-button class="tooltip-trigger">Transient 2</igc-button>
-        <igc-button id="elementButton">Element Anchor</igc-button>
+        <igc-button
+          onpointerenter="sharedTooltip.show(transient1)"
+          id="transient1"
+          >Transient 1</igc-button
+        >
+        <igc-button
+          onpointerenter="sharedTooltip.show(transient2)"
+          id="transient2"
+          >Transient 2</igc-button
+        >
+        <igc-button
+          onpointerenter="sharedTooltip.show(transient3)"
+          id="transient3"
+          >Transient 3</igc-button
+        >
       </div>
 
-      <igc-tooltip
-        anchor="first"
-        id="shared-tooltip"
-        placement="top"
-        ?sticky=${true}
-      >
+      <igc-tooltip anchor="first" id="sharedTooltip" placement="top">
         This is a shared tooltip!
       </igc-tooltip>
-
-      <igc-tooltip
-        message="This is a tooltip with an element anchor"
-      ></igc-tooltip>
     `;
   },
 };