From 1253a874646395d7907495dced590f9f82984ce9 Mon Sep 17 00:00:00 2001
From: Vlad Shilov <omgovich@ya.ru>
Date: Mon, 31 May 2021 18:30:38 +0300
Subject: [PATCH] Remove `preventDefault` call from the touch handlers

---
 package-lock.json                     | 22 +++++++++++-----------
 package.json                          |  4 ++--
 src/components/common/Interactive.tsx | 19 +++++++++++++------
 3 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 59dcc357..3a0cb15d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "react-colorful",
-  "version": "5.1.3",
+  "version": "5.2.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -15233,9 +15233,9 @@
       "dev": true
     },
     "react": {
-      "version": "17.0.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-17.0.0.tgz",
-      "integrity": "sha512-rG9bqS3LMuetoSUKHN8G3fMNuQOePKDThK6+2yXFWtoeTDLVNh/QCaxT+Jr+rNf4lwNXpx+atdn3Aa0oi8/6eQ==",
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz",
+      "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==",
       "dev": true,
       "requires": {
         "loose-envify": "^1.1.0",
@@ -15243,14 +15243,14 @@
       }
     },
     "react-dom": {
-      "version": "17.0.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.0.tgz",
-      "integrity": "sha512-OGnFbxCjI2TMAZYMVxi4hqheJiN8rCEVVrL7XIGzCB6beNc4Am8M47HtkvxODZw9QgjmAPKpLba9FTu4fC1byA==",
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
+      "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==",
       "dev": true,
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
-        "scheduler": "^0.20.0"
+        "scheduler": "^0.20.2"
       }
     },
     "react-is": {
@@ -16153,9 +16153,9 @@
       }
     },
     "scheduler": {
-      "version": "0.20.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.0.tgz",
-      "integrity": "sha512-XegIgta1bIaz2LdaL6eg1GEcE42g0BY9qFXCqlZ/+s2MuEKfigFCW6DEGBlZzeVFlwDmVusrWEyFtBo4sbkkdA==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz",
+      "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==",
       "dev": true,
       "requires": {
         "loose-envify": "^1.1.0",
diff --git a/package.json b/package.json
index 1765d310..b70ae3f4 100644
--- a/package.json
+++ b/package.json
@@ -188,8 +188,8 @@
     "parcel-bundler": "1.12.3",
     "parcel-plugin-css-to-string": "^2.5.2",
     "prettier": "^2.2.1",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "size-limit": "^4.10.1",
     "ts-jest": "^26.5.3",
     "typescript": "^4.2.3",
diff --git a/src/components/common/Interactive.tsx b/src/components/common/Interactive.tsx
index f9761fb2..91fddb6f 100644
--- a/src/components/common/Interactive.tsx
+++ b/src/components/common/Interactive.tsx
@@ -10,7 +10,7 @@ export interface Interaction {
 }
 
 // Check if an event was triggered by touch
-const isTouch = (e: MouseEvent | TouchEvent): e is TouchEvent => "touches" in e;
+const isTouch = (event: MouseEvent | TouchEvent): event is TouchEvent => "touches" in event;
 
 // Returns a relative position of the pointer inside the node's bounding box
 const getRelativePosition = (node: HTMLDivElement, event: MouseEvent | TouchEvent): Interaction => {
@@ -25,6 +25,13 @@ const getRelativePosition = (node: HTMLDivElement, event: MouseEvent | TouchEven
   };
 };
 
+// Browsers introduced an intervention, making touch events passive by default.
+// This workaround removes `preventDefault` call from the touch handlers.
+// https://github.com/facebook/react/issues/19651
+const preventDefaultMove = (event: MouseEvent | TouchEvent): void => {
+  !isTouch(event) && event.preventDefault();
+};
+
 interface Props {
   onMove: (interaction: Interaction) => void;
   onKey: (offset: Interaction) => void;
@@ -48,7 +55,7 @@ const InteractiveBase = ({ onMove, onKey, ...rest }: Props) => {
 
   const handleMove = useCallback(
     (event: MouseEvent | TouchEvent) => {
-      event.preventDefault();
+      preventDefaultMove(event);
 
       // If user moves the pointer outside of the window or iframe bounds and release it there,
       // `mouseup`/`touchend` won't be fired. In order to stop the picker from following the cursor
@@ -67,14 +74,14 @@ const InteractiveBase = ({ onMove, onKey, ...rest }: Props) => {
   );
 
   const handleMoveStart = useCallback(
-    ({ nativeEvent: event }: React.MouseEvent | React.TouchEvent) => {
-      event.preventDefault();
+    ({ nativeEvent }: React.MouseEvent | React.TouchEvent) => {
+      preventDefaultMove(nativeEvent);
 
-      if (!isValid(event)) return;
+      if (!isValid(nativeEvent)) return;
 
       // The node/ref must actually exist when user start an interaction.
       // We won't suppress the ESLint warning though, as it should probably be something to be aware of.
-      onMoveCallback(getRelativePosition(container.current!, event));
+      onMoveCallback(getRelativePosition(container.current!, nativeEvent));
       setDragging(true);
     },
     [onMoveCallback]