fix: components should only react to primary button pointer events. (#…

…5519)

* fix: components should only react to primary pointer events.

* cleanup. add pointerdown

* fix test

* make sure primary?

* review fixes

src/components/action-menu/action-menu.tsx

@@ -11,7 +11,7 @@ import {
   State
 } from "@stencil/core";
 import { CSS, SLOTS, ICONS } from "./resources";
-import { focusElement, toAriaBoolean } from "../../utils/dom";
+import { focusElement, isPrimaryPointerButton, toAriaBoolean } from "../../utils/dom";
 import { Fragment, VNode } from "@stencil/core/internal";
 import { getRoundRobinIndex } from "../../utils/array";
 import { guid } from "../../utils/guid";
@@ -121,7 +121,11 @@ export class ActionMenu {
   @Event({ cancelable: false }) calciteActionMenuOpenChange: EventEmitter<DeprecatedEventPayload>;
 
   @Listen("pointerdown", { target: "window" })
-  closeCalciteActionMenuOnClick(event: Event): void {
+  closeCalciteActionMenuOnClick(event: PointerEvent): void {
+    if (!isPrimaryPointerButton(event)) {
+      return;
+    }
+
     const composedPath = event.composedPath();
 
     if (composedPath.includes(this.el)) {
@@ -329,7 +333,11 @@ export class ActionMenu {
     this.setFocus();
   };
 
-  menuButtonClick = (): void => {
+  menuButtonClick = (event: PointerEvent): void => {
+    if (!isPrimaryPointerButton(event)) {
+      return;
+    }
+
     this.toggleOpen();
   };
 

src/components/color-picker/color-picker.tsx

@@ -24,7 +24,7 @@ import {
   RGB_LIMITS,
   TEXT
 } from "./resources";
-import { Direction, focusElement, getElementDir } from "../../utils/dom";
+import { Direction, focusElement, getElementDir, isPrimaryPointerButton } from "../../utils/dom";
 import { colorEqual, CSSColorMode, Format, normalizeHex, parseMode, SupportedMode } from "./utils";
 import { throttle } from "lodash-es";
 
@@ -552,6 +552,10 @@ export class ColorPicker implements InteractiveComponent {
   };
 
   private handleColorFieldAndSliderPointerDown = (event: PointerEvent): void => {
+    if (!isPrimaryPointerButton(event)) {
+      return;
+    }
+
     const { offsetX, offsetY } = event;
     const region = this.getCanvasRegion(offsetY);
 
@@ -575,7 +579,11 @@ export class ColorPicker implements InteractiveComponent {
       this.fieldAndSliderRenderingContext.canvas.getBoundingClientRect();
   };
 
-  private globalPointerUpHandler = (): void => {
+  private globalPointerUpHandler = (event: PointerEvent): void => {
+    if (!isPrimaryPointerButton(event)) {
+      return;
+    }
+
     const previouslyDragging = this.sliderThumbState === "drag" || this.hueThumbState === "drag";
 
     this.hueThumbState = "idle";

src/components/combobox/combobox.tsx

@@ -44,7 +44,7 @@ import {
 } from "../../utils/form";
 import { createObserver } from "../../utils/observers";
 import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
-import { toAriaBoolean } from "../../utils/dom";
+import { isPrimaryPointerButton, toAriaBoolean } from "../../utils/dom";
 import {
   OpenCloseComponent,
   connectOpenCloseComponent,
@@ -234,7 +234,11 @@ export class Combobox
   //--------------------------------------------------------------------------
 
   @Listen("pointerdown", { target: "document" })
-  documentClickHandler(event: Event): void {
+  documentClickHandler(event: PointerEvent): void {
+    if (!isPrimaryPointerButton(event)) {
+      return;
+    }
+
     this.setInactiveIfNotContained(event);
   }
 

src/components/dropdown/dropdown.tsx

@@ -13,7 +13,7 @@ import {
 } from "@stencil/core";
 import { ItemKeyboardEvent, Selection } from "./interfaces";
 
-import { focusElement, toAriaBoolean } from "../../utils/dom";
+import { focusElement, isPrimaryPointerButton, toAriaBoolean } from "../../utils/dom";
 import {
   positionFloatingUI,
   FloatingCSS,
@@ -291,8 +291,8 @@ export class Dropdown implements InteractiveComponent, OpenCloseComponent, Float
   @Event({ cancelable: false }) calciteDropdownOpen: EventEmitter<void>;
 
   @Listen("pointerdown", { target: "window" })
-  closeCalciteDropdownOnClick(event: Event): void {
-    if (!this.open || event.composedPath().includes(this.el)) {
+  closeCalciteDropdownOnClick(event: PointerEvent): void {
+    if (!isPrimaryPointerButton(event) || !this.open || event.composedPath().includes(this.el)) {
       return;
     }
 

src/components/input-number/input-number.tsx

@@ -12,7 +12,13 @@ import {
   VNode,
   Watch
 } from "@stencil/core";
-import { getElementDir, getElementProp, getSlotted, setRequestedIcon } from "../../utils/dom";
+import {
+  getElementDir,
+  getElementProp,
+  getSlotted,
+  isPrimaryPointerButton,
+  setRequestedIcon
+} from "../../utils/dom";
 
 import { CSS, SLOTS, TEXT } from "./resources";
 import { InputPlacement } from "./interfaces";
@@ -641,11 +647,19 @@ export class InputNumber
     }, valueNudgeDelayInMs);
   };
 
-  private nudgeButtonPointerUpAndOutHandler = (): void => {
+  private nudgeButtonPointerUpAndOutHandler = (event: PointerEvent): void => {
+    if (!isPrimaryPointerButton(event)) {
+      return;
+    }
+
     window.clearInterval(this.nudgeNumberValueIntervalId);
   };
 
   private nudgeButtonPointerDownHandler = (event: PointerEvent): void => {
+    if (!isPrimaryPointerButton(event)) {
+      return;
+    }
+
     event.preventDefault();
     const direction = (event.target as HTMLDivElement).dataset.adjustment as NumberNudgeDirection;
     if (!this.disabled) {

src/components/input/input.tsx

@@ -12,7 +12,13 @@ import {
   VNode,
   Watch
 } from "@stencil/core";
-import { getElementDir, getElementProp, getSlotted, setRequestedIcon } from "../../utils/dom";
+import {
+  getElementDir,
+  getElementProp,
+  getSlotted,
+  isPrimaryPointerButton,
+  setRequestedIcon
+} from "../../utils/dom";
 
 import { CSS, INPUT_TYPE_ICONS, SLOTS, TEXT } from "./resources";
 import { InputPlacement } from "./interfaces";
@@ -720,6 +726,10 @@ export class Input
   };
 
   private numberButtonPointerDownHandler = (event: PointerEvent): void => {
+    if (!isPrimaryPointerButton(event)) {
+      return;
+    }
+
     event.preventDefault();
     const direction = (event.target as HTMLDivElement).dataset.adjustment as NumberNudgeDirection;
     if (!this.disabled) {

src/components/popover/PopoverManager.ts

@@ -1,3 +1,4 @@
+import { isPrimaryPointerButton } from "../../utils/dom";
 import { ReferenceElement } from "../../utils/floating-ui";
 import { isActivationKey } from "../../utils/key";
 
@@ -52,7 +53,7 @@ export default class PopoverManager {
     return registeredElements.get(registeredElement);
   };
 
-  private togglePopovers = (event: KeyboardEvent | MouseEvent): void => {
+  private togglePopovers = (event: KeyboardEvent | PointerEvent): void => {
     const composedPath = event.composedPath();
     const togglePopover = this.queryPopover(composedPath);
 
@@ -75,8 +76,10 @@ export default class PopoverManager {
     this.togglePopovers(event);
   };
 
-  private clickHandler = (event: MouseEvent): void => {
-    this.togglePopovers(event);
+  private clickHandler = (event: PointerEvent): void => {
+    if (isPrimaryPointerButton(event)) {
+      this.togglePopovers(event);
+    }
   };
 
   private addListeners(): void {

src/components/shell-panel/shell-panel.tsx

@@ -12,7 +12,7 @@ import {
 } from "@stencil/core";
 import { CSS, SLOTS, TEXT } from "./resources";
 import { Position, Scale } from "../interfaces";
-import { getSlotted, getElementDir } from "../../utils/dom";
+import { getSlotted, getElementDir, isPrimaryPointerButton } from "../../utils/dom";
 import { clamp } from "../../utils/math";
 import {
   ConditionalSlotComponent,
@@ -357,6 +357,10 @@ export class ShellPanel implements ConditionalSlotComponent {
   };
 
   separatorPointerUp = (event: PointerEvent): void => {
+    if (!isPrimaryPointerButton(event)) {
+      return;
+    }
+
     event.preventDefault();
     document.removeEventListener("pointerup", this.separatorPointerUp);
     document.removeEventListener("pointermove", this.separatorPointerMove);
@@ -367,6 +371,10 @@ export class ShellPanel implements ConditionalSlotComponent {
   };
 
   separatorPointerDown = (event: PointerEvent): void => {
+    if (!isPrimaryPointerButton(event)) {
+      return;
+    }
+
     event.preventDefault();
     const { separatorEl } = this;