fix(action-menu, combobox, dropdown, popover, tooltip): use click ins…

…tead of pointerdown for click contexts

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();
   };
 

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;
     }
 

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<void>;
 
-  @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;
     }
 

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 });
   }
 }

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,15 +151,15 @@ 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 });
   }
 
   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 });
   }