fix(tooltip): allow focusing on a reference element and then clicking…

… a tooltip. #9827
Esri · Jul 22, 2024 · 7807e20 · 7807e20
1 parent bd90f63
commit 7807e20
Showing 1 changed file with 15 additions and 21 deletions.
diff --git a/packages/calcite-components/src/components/tooltip/TooltipManager.ts b/packages/calcite-components/src/components/tooltip/TooltipManager.ts
@@ -140,38 +140,45 @@ export default class TooltipManager {
     this.toggleTooltip(tooltip, true);
   };
 
-  private focusInHandler = (event: FocusEvent): void => {
-    this.queryFocusedTooltip(event, true);
+  private blurHandler = (): void => {
+    this.closeActiveTooltip();
   };
 
-  private focusOutHandler = (event: FocusEvent): void => {
-    this.queryFocusedTooltip(event, false);
+  private focusInHandler = (event: FocusEvent): void => {
+    const composedPath = event.composedPath();
+    const tooltip = this.queryTooltip(composedPath);
+
+    this.closeTooltipIfNotActive(tooltip);
+
+    if (!tooltip) {
+      return;
+    }
+
+    this.toggleFocusedTooltip(tooltip, true);
   };
 
   private addShadowListeners(shadowRoot: ShadowRoot): void {
     shadowRoot.addEventListener("focusin", this.focusInHandler, { capture: true });
-    shadowRoot.addEventListener("focusout", this.focusOutHandler, { capture: true });
   }
 
   private removeShadowListeners(shadowRoot: ShadowRoot): void {
     shadowRoot.removeEventListener("focusin", this.focusInHandler, { capture: true });
-    shadowRoot.removeEventListener("focusout", this.focusOutHandler, { capture: true });
   }
 
   private addListeners(): void {
     window.addEventListener("keydown", this.keyDownHandler, { capture: true });
     window.addEventListener("pointermove", this.pointerMoveHandler, { capture: true });
     window.addEventListener("click", this.clickHandler, { capture: true });
     window.addEventListener("focusin", this.focusInHandler, { capture: true });
-    window.addEventListener("focusout", this.focusOutHandler, { capture: true });
+    window.addEventListener("blur", this.blurHandler, { capture: true });
   }
 
   private removeListeners(): void {
     window.removeEventListener("keydown", this.keyDownHandler, { capture: true });
     window.removeEventListener("pointermove", this.pointerMoveHandler, { capture: true });
     window.removeEventListener("click", this.clickHandler, { capture: true });
     window.removeEventListener("focusin", this.focusInHandler, { capture: true });
-    window.removeEventListener("focusout", this.focusOutHandler, { capture: true });
+    window.removeEventListener("blur", this.blurHandler, { capture: true });
   }
 
   private clearHoverOpenTimeout(): void {
@@ -242,19 +249,6 @@ export default class TooltipManager {
     }, TOOLTIP_CLOSE_DELAY_MS);
   };
 
-  private queryFocusedTooltip(event: FocusEvent, open: boolean): void {
-    const composedPath = event.composedPath();
-    const tooltip = this.queryTooltip(composedPath);
-
-    this.closeTooltipIfNotActive(tooltip);
-
-    if (!tooltip) {
-      return;
-    }
-
-    this.toggleFocusedTooltip(tooltip, open);
-  }
-
   private registerShadowRoot(shadowRoot: ShadowRoot): void {
     const { registeredShadowRootCounts } = this;