fix: number input pointer event

chakra-ui · Sep 19, 2022 · ef722ca · ef722ca · vercel · Sep 19, 2022
1 parent ab1c42f
commit ef722ca
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/.changeset/tiny-olives-cheer.md b/.changeset/tiny-olives-cheer.md
@@ -0,0 +1,8 @@
+---
+"@chakra-ui/number-input": patch
+---
+
+Fix issue where input spins unexpectedly on right clicking the increment or
+decrement button with a pointer.
+
+Now, only left click (or primary button) will trigger a value change.
diff --git a/packages/components/number-input/src/use-number-input.ts b/packages/components/number-input/src/use-number-input.ts
@@ -465,7 +465,8 @@ export function useNumberInput(props: UseNumberInputProps = {}) {
         role: "button",
         tabIndex: -1,
         onPointerDown: callAllHandlers(props.onPointerDown, (event) => {
-          if (!disabled) spinUp(event)
+          if (event.button !== 0 || disabled) return
+          spinUp(event)
         }),
         onPointerLeave: callAllHandlers(props.onPointerLeave, spinner.stop),
         onPointerUp: callAllHandlers(props.onPointerUp, spinner.stop),
@@ -485,7 +486,8 @@ export function useNumberInput(props: UseNumberInputProps = {}) {
         role: "button",
         tabIndex: -1,
         onPointerDown: callAllHandlers(props.onPointerDown, (event) => {
-          if (!disabled) spinDown(event)
+          if (event.button !== 0 || disabled) return
+          spinDown(event)
         }),
         onPointerLeave: callAllHandlers(props.onPointerLeave, spinner.stop),
         onPointerUp: callAllHandlers(props.onPointerUp, spinner.stop),