fix: click event should be worked on mobile

linxianxi · Oct 17, 2024 · 720ebaa · 720ebaa
1 parent 6708b9c
commit 720ebaa
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 37 deletions.
diff --git a/src/Selectable.tsx b/src/Selectable.tsx
@@ -171,6 +171,10 @@ function Selectable<T>(
 
     const onMouseMove = (e: MouseEvent | TouchEvent) => {
       if (isMouseDowning) {
+        // Prevent scroll on mobile
+        if (e instanceof TouchEvent) {
+          e.preventDefault();
+        }
         const { clientX, clientY } = getClientXY(e);
         moveClient.current = { x: clientX, y: clientY };
         const { left, top } = scrollContainer.getBoundingClientRect();
@@ -248,12 +252,17 @@ function Selectable<T>(
     };
 
     const onMouseDown = (e: MouseEvent | TouchEvent) => {
-      if (e instanceof MouseEvent && e.button !== 0) {
+      const isMouseEvent = e instanceof MouseEvent;
+      if (isMouseEvent && e.button !== 0) {
         return;
       }
 
-      // disable text selection, but it will prevent default scroll behavior when mouse move, so we used `useScroll`
-      e.preventDefault();
+      // Disable text selection, but it will prevent default scroll behavior when mouse move, so we used `useScroll`
+      // And it will prevent click events on mobile devices, so don't trigger it
+      if (isMouseEvent) {
+        e.preventDefault();
+      }
+
       isMouseDowning = true;
 
       if (selectStartRangeRef.current !== 'all') {

diff --git a/src/hooks/useScroll.ts b/src/hooks/useScroll.ts
@@ -1,4 +1,4 @@
-import { useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { getClientXY } from '../utils';
 
 const SCROLL_STEP = 4;
@@ -11,41 +11,24 @@ export default function useScroll() {
   const leftRaf = useRef<number | null>(null);
   const rightRaf = useRef<number | null>(null);
 
-  const cancelTopRaf = () => {
-    if (topRaf.current) {
-      cancelAnimationFrame(topRaf.current);
-      topRaf.current = null;
-    }
-  };
-
-  const cancelBottomRaf = () => {
-    if (bottomRaf.current) {
-      cancelAnimationFrame(bottomRaf.current);
-      bottomRaf.current = null;
-    }
-  };
-
-  const cancelLeftRaf = () => {
-    if (leftRaf.current) {
-      cancelAnimationFrame(leftRaf.current);
-      leftRaf.current = null;
-    }
-  };
-
-  const cancelRightRaf = () => {
-    if (rightRaf.current) {
-      cancelAnimationFrame(rightRaf.current);
-      rightRaf.current = null;
+  const cancelRaf = (raf: React.MutableRefObject<number | null>) => {
+    if (raf.current) {
+      cancelAnimationFrame(raf.current);
+      raf.current = null;
     }
   };
 
   const cancelScroll = () => {
-    cancelTopRaf();
-    cancelBottomRaf();
-    cancelLeftRaf();
-    cancelRightRaf();
+    cancelRaf(topRaf);
+    cancelRaf(bottomRaf);
+    cancelRaf(leftRaf);
+    cancelRaf(rightRaf);
   };
 
+  useEffect(() => {
+    return cancelScroll;
+  }, []);
+
   const smoothScroll = (e: MouseEvent | TouchEvent, _container: HTMLElement) => {
     const container = _container === document.body ? document.documentElement : _container;
     const { clientX, clientY } = getClientXY(e);
@@ -64,7 +47,7 @@ export default function useScroll() {
         callback();
       }
     } else {
-      cancelTopRaf();
+      cancelRaf(topRaf);
     }
 
     // bottom
@@ -84,7 +67,7 @@ export default function useScroll() {
         callback();
       }
     } else {
-      cancelBottomRaf();
+      cancelRaf(bottomRaf);
     }
 
     // left
@@ -101,7 +84,7 @@ export default function useScroll() {
         callback();
       }
     } else {
-      cancelLeftRaf();
+      cancelRaf(leftRaf);
     }
 
     // right
@@ -121,7 +104,7 @@ export default function useScroll() {
         callback();
       }
     } else {
-      cancelRightRaf();
+      cancelRaf(rightRaf);
     }
   };