fix(VColorPicker): use a passive touchstart listener

fixes #18189
vuetifyjs · Aug 31, 2023 · af407fd · af407fd
1 parent eee34c0
commit af407fd
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 11 deletions.
diff --git a/packages/vuetify/src/components/VColorPicker/VColorPickerCanvas.sass b/packages/vuetify/src/components/VColorPicker/VColorPickerCanvas.sass
@@ -7,6 +7,7 @@
   position: relative
   overflow: hidden
   contain: content
+  touch-action: none
 
   &__dot
     position: absolute

diff --git a/packages/vuetify/src/components/VColorPicker/VColorPickerCanvas.tsx b/packages/vuetify/src/components/VColorPicker/VColorPickerCanvas.tsx
@@ -80,19 +80,15 @@ export const VColorPickerCanvas = defineComponent({
       }
     }
 
-    function handleClick (e: MouseEvent) {
-      if (props.disabled || !canvasRef.value) return
-
-      updateDotPosition(e.clientX, e.clientY, canvasRef.value.getBoundingClientRect())
-    }
-
     function handleMouseDown (e: MouseEvent | TouchEvent) {
-      // To prevent selection while moving cursor
-      e.preventDefault()
+      if (e.type === 'mousedown') {
+        // Prevent text selection while dragging
+        e.preventDefault()
+      }
 
       if (props.disabled) return
 
-      isInteracting.value = true
+      handleMouseMove(e)
 
       window.addEventListener('mousemove', handleMouseMove)
       window.addEventListener('mouseup', handleMouseUp)
@@ -189,9 +185,8 @@ export const VColorPickerCanvas = defineComponent({
           props.class,
         ]}
         style={ props.style }
-        onClick={ handleClick }
         onMousedown={ handleMouseDown }
-        onTouchstart={ handleMouseDown }
+        onTouchstartPassive={ handleMouseDown }
       >
         <canvas
           ref={ canvasRef }