fix(VTimePicker): use window events instead of element (#19523)

fixes #19508
vuetifyjs · Apr 9, 2024 · 73c3fb4 · 73c3fb4
1 parent 37a573d
commit 73c3fb4
Showing 1 changed file with 8 additions and 5 deletions.
diff --git a/packages/vuetify/src/labs/VTimePicker/VTimePickerClock.tsx b/packages/vuetify/src/labs/VTimePicker/VTimePickerClock.tsx
@@ -200,6 +200,10 @@ export const VTimePickerClock = genericComponent()({
     function onMouseDown (e: MouseEvent | TouchEvent) {
       e.preventDefault()
 
+      window.addEventListener('mousemove', onDragMove)
+      window.addEventListener('touchmove', onDragMove)
+      window.addEventListener('mouseup', onMouseUp)
+      window.addEventListener('touchend', onMouseUp)
       valueOnMouseDown.value = null
       valueOnMouseUp.value = null
       isDragging.value = true
@@ -208,6 +212,10 @@ export const VTimePickerClock = genericComponent()({
 
     function onMouseUp (e: MouseEvent | TouchEvent) {
       e.stopPropagation()
+      window.removeEventListener('mousemove', onDragMove)
+      window.removeEventListener('touchmove', onDragMove)
+      window.removeEventListener('mouseup', onMouseUp)
+      window.removeEventListener('touchend', onMouseUp)
 
       isDragging.value = false
       if (valueOnMouseUp.value !== null && isAllowed(valueOnMouseUp.value)) {
@@ -226,12 +234,7 @@ export const VTimePickerClock = genericComponent()({
             },
           ]}
           onMousedown={ onMouseDown }
-          onMouseup={ onMouseUp }
-          onMouseleave={ (e: MouseEvent) => (isDragging.value && onMouseUp(e)) }
           onTouchstart={ onMouseDown }
-          onTouchend={ onMouseUp }
-          onMousemove={ onDragMove }
-          onTouchmove={ onDragMove }
           onWheel={ (e: WheelEvent) => (props.scrollable && wheel(e)) }
           ref={ clockRef }
         >