From 0e1bead79eba361dc6677a2f6b8db12daf55b2f2 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Fri, 18 Oct 2024 09:59:57 -0700 Subject: [PATCH] refactor(tooltip): no longer use capture events. (#9839) **Related Issue:** None ## Summary - Update `TooltipManager` to no longer use capture events. - preventDefault() on escape key pressed from a referenceElement or active tooltip. --- .../src/components/tooltip/TooltipManager.ts | 27 ++++++++++--------- 1 file changed, 15 insertions(+), 12 deletions(-) diff --git a/packages/calcite-components/src/components/tooltip/TooltipManager.ts b/packages/calcite-components/src/components/tooltip/TooltipManager.ts index 157e46ecffb..307806de418 100644 --- a/packages/calcite-components/src/components/tooltip/TooltipManager.ts +++ b/packages/calcite-components/src/components/tooltip/TooltipManager.ts @@ -81,10 +81,13 @@ export default class TooltipManager { if (activeTooltip?.open) { this.clearHoverTimeout(); this.closeActiveTooltip(); - const referenceElement = getEffectiveReferenceElement(activeTooltip); + const composedPath = event.composedPath(); - if (referenceElement instanceof Element && referenceElement.contains(event.target as HTMLElement)) { + if ( + (referenceElement instanceof Element && composedPath.includes(referenceElement)) || + composedPath.includes(activeTooltip) + ) { event.preventDefault(); } } @@ -173,26 +176,26 @@ export default class TooltipManager { }; private addShadowListeners(shadowRoot: ShadowRoot): void { - shadowRoot.addEventListener("focusin", this.focusInHandler, { capture: true }); + shadowRoot.addEventListener("focusin", this.focusInHandler); } private removeShadowListeners(shadowRoot: ShadowRoot): void { - shadowRoot.removeEventListener("focusin", this.focusInHandler, { capture: true }); + shadowRoot.removeEventListener("focusin", this.focusInHandler); } 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("keydown", this.keyDownHandler); + window.addEventListener("pointermove", this.pointerMoveHandler); + window.addEventListener("click", this.clickHandler); + window.addEventListener("focusin", this.focusInHandler); window.addEventListener("blur", this.blurHandler); } 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("keydown", this.keyDownHandler); + window.removeEventListener("pointermove", this.pointerMoveHandler); + window.removeEventListener("click", this.clickHandler); + window.removeEventListener("focusin", this.focusInHandler); window.removeEventListener("blur", this.blurHandler); }