fix: When touch the slider while touching another area, the slider will move with the first touch (#1037)

Author: sus-yoshikane-t

src/hooks/useDrag.ts

@@ -8,7 +8,7 @@ import type { OffsetValues } from './useOffset';
 const REMOVE_DIST = 130;
 
 function getPosition(e: React.MouseEvent | React.TouchEvent | MouseEvent | TouchEvent) {
-  const obj = 'touches' in e ? e.touches[0] : e;
+  const obj = 'targetTouches' in e ? e.targetTouches[0] : e;
 
   return { pageX: obj.pageX, pageY: obj.pageY };
 }
@@ -40,6 +40,7 @@ function useDrag(
 
   const mouseMoveEventRef = React.useRef<(event: MouseEvent) => void>(null);
   const mouseUpEventRef = React.useRef<(event: MouseEvent) => void>(null);
+  const touchEventTargetRef = React.useRef<EventTarget>(null);
 
   const { onDragStart, onDragChange } = React.useContext(UnstableContext);
 
@@ -54,8 +55,10 @@ function useDrag(
     () => () => {
       document.removeEventListener('mousemove', mouseMoveEventRef.current);
       document.removeEventListener('mouseup', mouseUpEventRef.current);
-      document.removeEventListener('touchmove', mouseMoveEventRef.current);
-      document.removeEventListener('touchend', mouseUpEventRef.current);
+      if (touchEventTargetRef.current) {
+        touchEventTargetRef.current.removeEventListener('touchmove', mouseMoveEventRef.current);
+        touchEventTargetRef.current.removeEventListener('touchend', mouseUpEventRef.current);
+      }
     },
     [],
   );
@@ -193,10 +196,13 @@ function useDrag(
 
       document.removeEventListener('mouseup', onMouseUp);
       document.removeEventListener('mousemove', onMouseMove);
-      document.removeEventListener('touchend', onMouseUp);
-      document.removeEventListener('touchmove', onMouseMove);
+      if (touchEventTargetRef.current) {
+        touchEventTargetRef.current.removeEventListener('touchmove', mouseMoveEventRef.current);
+        touchEventTargetRef.current.removeEventListener('touchend', mouseUpEventRef.current);
+      }
       mouseMoveEventRef.current = null;
       mouseUpEventRef.current = null;
+      touchEventTargetRef.current = null;
 
       finishChange(deleteMark);
 
@@ -206,10 +212,11 @@ function useDrag(
 
     document.addEventListener('mouseup', onMouseUp);
     document.addEventListener('mousemove', onMouseMove);
-    document.addEventListener('touchend', onMouseUp);
-    document.addEventListener('touchmove', onMouseMove);
+    e.currentTarget.addEventListener('touchend', onMouseUp);
+    e.currentTarget.addEventListener('touchmove', onMouseMove);
     mouseMoveEventRef.current = onMouseMove;
     mouseUpEventRef.current = onMouseUp;
+    touchEventTargetRef.current = e.currentTarget;
   };
 
   // Only return cache value when it mapping with rawValues

tests/Range.test.tsx

@@ -80,16 +80,18 @@ describe('Range', () => {
   ) {
     const touchStart = createEvent.touchStart(container.getElementsByClassName(element)[0], {
       touches: [{}],
+      targetTouches: [{}],
     });
-    (touchStart as any).touches[0].pageX = start;
+    (touchStart as any).targetTouches[0].pageX = start;
     fireEvent(container.getElementsByClassName(element)[0], touchStart);
 
     // Drag
-    const touchMove = createEvent.touchMove(document, {
+    const touchMove = createEvent.touchMove(container.getElementsByClassName(element)[0], {
       touches: [{}],
+      targetTouches: [{}],
     });
-    (touchMove as any).touches[0].pageX = end;
-    fireEvent(document, touchMove);
+    (touchMove as any).targetTouches[0].pageX = end;
+    fireEvent(container.getElementsByClassName(element)[0], touchMove);
   }
 
   it('should render Range with correct DOM structure', () => {