From af407fdb9527469e2c6881c5c3ec04b1d67d1542 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Thu, 31 Aug 2023 18:42:34 +1000
Subject: [PATCH] fix(VColorPicker): use a passive touchstart listener

fixes #18189
---
 .../VColorPicker/VColorPickerCanvas.sass        |  1 +
 .../VColorPicker/VColorPickerCanvas.tsx         | 17 ++++++-----------
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/packages/vuetify/src/components/VColorPicker/VColorPickerCanvas.sass b/packages/vuetify/src/components/VColorPicker/VColorPickerCanvas.sass
index 6802376d491..82936261404 100644
--- 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
index 958746857b2..2b3a3c9940c 100644
--- 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 }