fix(NumberField): infinite counting in when holding button (#1005)

* fix: infinite counting in `NumberFieldInput` * chore: apply lint --------- Co-authored-by: zernonia <zernonia@gmail.com>
unovue · Jun 18, 2024 · 74e0533 · 74e0533
1 parent 7939b67
commit 74e0533
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 14 deletions.
diff --git 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
@@ -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 />