From 21e2c2b249adc5e2dd391b02fecf3ac74be1bbef Mon Sep 17 00:00:00 2001 From: JC Franco Date: Thu, 14 Mar 2024 16:34:38 -0700 Subject: [PATCH] fix(action-menu, combobox, dropdown, popover, tooltip): use click instead of pointerdown for click contexts --- .../src/components/action-menu/action-menu.tsx | 12 ++++-------- .../src/components/combobox/combobox.tsx | 11 +++-------- .../src/components/dropdown/dropdown.tsx | 16 +++------------- .../src/components/popover/PopoverManager.ts | 9 +++------ .../src/components/tooltip/TooltipManager.ts | 12 ++++-------- 5 files changed, 17 insertions(+), 43 deletions(-) diff --git a/packages/calcite-components/src/components/action-menu/action-menu.tsx b/packages/calcite-components/src/components/action-menu/action-menu.tsx index 4d57ddcfd30..1d9ec76d735 100755 --- a/packages/calcite-components/src/components/action-menu/action-menu.tsx +++ b/packages/calcite-components/src/components/action-menu/action-menu.tsx @@ -11,7 +11,7 @@ import { } from "@stencil/core"; import { Fragment, VNode } from "@stencil/core/internal"; import { getRoundRobinIndex } from "../../utils/array"; -import { focusElement, isPrimaryPointerButton, toAriaBoolean } from "../../utils/dom"; +import { focusElement, toAriaBoolean } from "../../utils/dom"; import { EffectivePlacement, LogicalPlacement, OverlayPositioning } from "../../utils/floating-ui"; import { guid } from "../../utils/guid"; import { isActivationKey } from "../../utils/key"; @@ -222,7 +222,7 @@ export class ActionMenu implements LoadableComponent { menuButtonEl.text = label; } - menuButtonEl.addEventListener("pointerdown", this.menuButtonClick); + menuButtonEl.addEventListener("click", this.menuButtonClick); menuButtonEl.addEventListener("keydown", this.menuButtonKeyDown); }; @@ -233,7 +233,7 @@ export class ActionMenu implements LoadableComponent { return; } - menuButtonEl.removeEventListener("pointerdown", this.menuButtonClick); + menuButtonEl.removeEventListener("click", this.menuButtonClick); menuButtonEl.removeEventListener("keydown", this.menuButtonKeyDown); }; @@ -341,11 +341,7 @@ export class ActionMenu implements LoadableComponent { this.setFocus(); }; - menuButtonClick = (event: PointerEvent): void => { - if (!isPrimaryPointerButton(event)) { - return; - } - + private menuButtonClick = (): void => { this.toggleOpen(); }; diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx index 177772973a8..4e75894c4aa 100644 --- a/packages/calcite-components/src/components/combobox/combobox.tsx +++ b/packages/calcite-components/src/components/combobox/combobox.tsx @@ -15,12 +15,7 @@ import { import { debounce } from "lodash-es"; import { filter } from "../../utils/filter"; -import { - getElementWidth, - getTextWidth, - isPrimaryPointerButton, - toAriaBoolean, -} from "../../utils/dom"; +import { getElementWidth, getTextWidth, toAriaBoolean } from "../../utils/dom"; import { connectFloatingUI, defaultMenuPlacement, @@ -321,9 +316,9 @@ export class Combobox // //-------------------------------------------------------------------------- - @Listen("pointerdown", { target: "document" }) + @Listen("click", { target: "document" }) documentClickHandler(event: PointerEvent): void { - if (this.disabled || !isPrimaryPointerButton(event)) { + if (this.disabled) { return; } diff --git a/packages/calcite-components/src/components/dropdown/dropdown.tsx b/packages/calcite-components/src/components/dropdown/dropdown.tsx index b51250699a5..39e8127fdb5 100644 --- a/packages/calcite-components/src/components/dropdown/dropdown.tsx +++ b/packages/calcite-components/src/components/dropdown/dropdown.tsx @@ -13,12 +13,7 @@ import { } from "@stencil/core"; import { ItemKeyboardEvent } from "./interfaces"; -import { - focusElement, - focusElementInGroup, - isPrimaryPointerButton, - toAriaBoolean, -} from "../../utils/dom"; +import { focusElement, focusElementInGroup, toAriaBoolean } from "../../utils/dom"; import { connectFloatingUI, defaultMenuPlacement, @@ -332,14 +327,9 @@ export class Dropdown /** Fires when the component is open and animation is complete. */ @Event({ cancelable: false }) calciteDropdownOpen: EventEmitter; - @Listen("pointerdown", { target: "window" }) + @Listen("click", { target: "window" }) closeCalciteDropdownOnClick(event: PointerEvent): void { - if ( - this.disabled || - !isPrimaryPointerButton(event) || - !this.open || - event.composedPath().includes(this.el) - ) { + if (this.disabled || !this.open || event.composedPath().includes(this.el)) { return; } diff --git a/packages/calcite-components/src/components/popover/PopoverManager.ts b/packages/calcite-components/src/components/popover/PopoverManager.ts index ea9923d56b1..71e53c0883c 100644 --- a/packages/calcite-components/src/components/popover/PopoverManager.ts +++ b/packages/calcite-components/src/components/popover/PopoverManager.ts @@ -1,4 +1,3 @@ -import { isPrimaryPointerButton } from "../../utils/dom"; import { ReferenceElement } from "../../utils/floating-ui"; import { isActivationKey } from "../../utils/key"; @@ -85,18 +84,16 @@ export default class PopoverManager { }; private clickHandler = (event: PointerEvent): void => { - if (isPrimaryPointerButton(event)) { - this.togglePopovers(event); - } + this.togglePopovers(event); }; private addListeners(): void { - window.addEventListener("pointerdown", this.clickHandler, { capture: true }); + window.addEventListener("click", this.clickHandler, { capture: true }); window.addEventListener("keydown", this.keyHandler, { capture: true }); } private removeListeners(): void { - window.removeEventListener("pointerdown", this.clickHandler, { capture: true }); + window.removeEventListener("click", this.clickHandler, { capture: true }); window.removeEventListener("keydown", this.keyHandler, { capture: true }); } } diff --git a/packages/calcite-components/src/components/tooltip/TooltipManager.ts b/packages/calcite-components/src/components/tooltip/TooltipManager.ts index 414466713e9..a1739687393 100644 --- a/packages/calcite-components/src/components/tooltip/TooltipManager.ts +++ b/packages/calcite-components/src/components/tooltip/TooltipManager.ts @@ -1,4 +1,4 @@ -import { getShadowRootNode, isPrimaryPointerButton } from "../../utils/dom"; +import { getShadowRootNode } from "../../utils/dom"; import { ReferenceElement } from "../../utils/floating-ui"; import { TOOLTIP_OPEN_DELAY_MS, TOOLTIP_CLOSE_DELAY_MS } from "./resources"; import { getEffectiveReferenceElement } from "./utils"; @@ -119,11 +119,7 @@ export default class TooltipManager { } }; - private pointerDownHandler = (event: PointerEvent): void => { - if (!isPrimaryPointerButton(event)) { - return; - } - + private clickHandler = (event: PointerEvent): void => { const clickedTooltip = this.queryTooltip(event.composedPath()); this.clickedTooltip = clickedTooltip; @@ -155,7 +151,7 @@ export default class TooltipManager { private addListeners(): void { window.addEventListener("keydown", this.keyDownHandler, { capture: true }); window.addEventListener("pointermove", this.pointerMoveHandler, { capture: true }); - window.addEventListener("pointerdown", this.pointerDownHandler, { capture: true }); + window.addEventListener("click", this.clickHandler, { capture: true }); window.addEventListener("focusin", this.focusInHandler, { capture: true }); window.addEventListener("focusout", this.focusOutHandler, { capture: true }); } @@ -163,7 +159,7 @@ export default class TooltipManager { private removeListeners(): void { window.removeEventListener("keydown", this.keyDownHandler, { capture: true }); window.removeEventListener("pointermove", this.pointerMoveHandler, { capture: true }); - window.removeEventListener("pointerdown", this.pointerDownHandler, { capture: true }); + window.removeEventListener("click", this.clickHandler, { capture: true }); window.removeEventListener("focusin", this.focusInHandler, { capture: true }); window.removeEventListener("focusout", this.focusOutHandler, { capture: true }); }