fix(VNumberInput): fix endless increment (#21610)

fixes #21581

Co-authored-by: Kael <[email protected]>

Author: Haviles04

packages/vuetify/src/components/VNumberInput/VNumberInput.tsx

@@ -148,15 +148,15 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
         onClick: onControlClick,
         onPointerup: onControlMouseup,
         onPointerdown: onUpControlMousedown,
-        onPointercancel: onControlPointerCancel,
+        onPointercancel: onControlMouseup,
       },
     }
     const decrementSlotProps = {
       props: {
         onClick: onControlClick,
         onPointerup: onControlMouseup,
         onPointerdown: onDownControlMousedown,
-        onPointercancel: onControlPointerCancel,
+        onPointercancel: onControlMouseup,
       },
     }
 
@@ -250,7 +250,6 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
       const el = e.currentTarget as HTMLElement
       el?.releasePointerCapture(e.pointerId)
       e.preventDefault()
-      e.stopPropagation()
       holdStop()
     }
 
@@ -270,12 +269,6 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
       holdStart('down')
     }
 
-    function onControlPointerCancel (e: PointerEvent) {
-      const el = e.currentTarget as HTMLElement
-      el?.releasePointerCapture(e.pointerId)
-      holdStop()
-    }
-
     function clampModel () {
       if (controlsDisabled.value) return
       if (!vTextFieldRef.value) return
@@ -331,7 +324,7 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
             onClick={ onControlClick }
             onPointerdown={ onUpControlMousedown }
             onPointerup={ onControlMouseup }
-            onPointercancel={ onControlPointerCancel }
+            onPointercancel={ onControlMouseup }
             size={ controlNodeSize.value }
             tabindex="-1"
           />
@@ -366,7 +359,7 @@ export const VNumberInput = genericComponent<VNumberInputSlots>()({
             onClick={ onControlClick }
             onPointerdown={ onDownControlMousedown }
             onPointerup={ onControlMouseup }
-            onPointercancel={ onControlPointerCancel }
+            onPointercancel={ onControlMouseup }
             size={ controlNodeSize.value }
             tabindex="-1"
           />

packages/vuetify/src/components/VNumberInput/hold.ts

@@ -13,6 +13,8 @@ export function useHold ({ toggleUpDown }: { toggleUpDown: (increment: boolean)
   function holdStart (value: 'up' | 'down') {
     holdStop()
     tick(value)
+    window.addEventListener('pointerup', holdStop)
+    document.addEventListener('blur', holdStop)
     timeout = window.setTimeout(() => {
       interval = window.setInterval(() => tick(value), HOLD_REPEAT)
     }, HOLD_DELAY)
@@ -21,6 +23,8 @@ export function useHold ({ toggleUpDown }: { toggleUpDown: (increment: boolean)
   function holdStop () {
     window.clearTimeout(timeout)
     window.clearInterval(interval)
+    window.removeEventListener('pointerup', holdStop)
+    document.removeEventListener('blur', holdStop)
   }
 
   function tick (value: 'up' | 'down') {