From 74e0533c2a6738073182eb5b9e5a0acbb1614f8b Mon Sep 17 00:00:00 2001
From: Saeid Zareie <65568529+Saeid-Za@users.noreply.github.com>
Date: Tue, 18 Jun 2024 08:38:54 +0330
Subject: [PATCH] fix(NumberField): infinite counting in when holding button
 (#1005)

* fix: infinite counting in `NumberFieldInput`

* chore: apply lint

---------

Co-authored-by: zernonia <zernonia@gmail.com>
---
 .../src/NumberField/NumberFieldDecrement.vue      | 15 ++++++++-------
 .../src/NumberField/NumberFieldIncrement.vue      | 15 ++++++++-------
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/packages/radix-vue/src/NumberField/NumberFieldDecrement.vue b/packages/radix-vue/src/NumberField/NumberFieldDecrement.vue
index c24d18819..cd5fa12ce 100644
--- a/packages/radix-vue/src/NumberField/NumberFieldDecrement.vue
+++ b/packages/radix-vue/src/NumberField/NumberFieldDecrement.vue
@@ -3,7 +3,7 @@ import type { PrimitiveProps } from '@/Primitive'
 import { injectNumberFieldRootContext } from './NumberFieldRoot.vue'
 import { useMousePressed } from '@vueuse/core'
 import { usePressedHold } from './utils'
-import { computed } from 'vue'
+import { computed, watch } from 'vue'
 
 export interface NumberFieldDecrementProps extends PrimitiveProps {
   disabled?: boolean
@@ -27,6 +27,13 @@ onTrigger(() => {
   rootContext.handleDecrease()
 })
 
+watch(isPressed, () => {
+  if (isPressed.value)
+    handlePressStart()
+  else
+    handlePressEnd()
+})
+
 const isDisabled = computed(() => rootContext.disabled?.value || props.disabled || rootContext.isDecreaseDisabled.value)
 </script>
 
@@ -43,12 +50,6 @@ const isDisabled = computed(() => rootContext.disabled?.value || props.disabled
     :disabled="isDisabled ? '' : undefined"
     :data-disabled="isDisabled ? '' : undefined"
     :data-pressed="isPressed ? 'true' : undefined"
-    @pointerdown.left.prevent="() => {
-      handlePressStart()
-    }"
-    @pointerup.left="() => {
-      handlePressEnd()
-    }"
     @mousedown.left.prevent
   >
     <slot />
diff --git a/packages/radix-vue/src/NumberField/NumberFieldIncrement.vue b/packages/radix-vue/src/NumberField/NumberFieldIncrement.vue
index 19b67ec72..ab8a0f876 100644
--- a/packages/radix-vue/src/NumberField/NumberFieldIncrement.vue
+++ b/packages/radix-vue/src/NumberField/NumberFieldIncrement.vue
@@ -3,7 +3,7 @@ import type { PrimitiveProps } from '@/Primitive'
 import { injectNumberFieldRootContext } from './NumberFieldRoot.vue'
 import { useMousePressed } from '@vueuse/core'
 import { usePressedHold } from './utils'
-import { computed } from 'vue'
+import { computed, watch } from 'vue'
 
 export interface NumberFieldIncrementProps extends PrimitiveProps {
   disabled?: boolean
@@ -27,6 +27,13 @@ onTrigger(() => {
   rootContext.handleIncrease()
 })
 
+watch(isPressed, () => {
+  if (isPressed.value)
+    handlePressStart()
+  else
+    handlePressEnd()
+})
+
 const isDisabled = computed(() => rootContext.disabled?.value || props.disabled || rootContext.isIncreaseDisabled.value)
 </script>
 
@@ -43,12 +50,6 @@ const isDisabled = computed(() => rootContext.disabled?.value || props.disabled
     :disabled="isDisabled ? '' : undefined"
     :data-disabled="isDisabled ? '' : undefined"
     :data-pressed="isPressed ? 'true' : undefined"
-    @pointerdown.left.prevent="() => {
-      handlePressStart()
-    }"
-    @pointerup.left="() => {
-      handlePressEnd()
-    }"
     @mousedown.left.prevent
   >
     <slot />