fix: Disable text selection when drag-scrolling

plankanban · Nov 22, 2024 · 54a969e · 54a969e
1 parent d0a8c8b
commit 54a969e
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 6 deletions.
diff --git a/client/src/components/Board/Board.jsx b/client/src/components/Board/Board.jsx
@@ -76,13 +76,16 @@ const Board = React.memo(
         }
 
         prevPosition.current = event.clientX;
+
+        window.getSelection().removeAllRanges();
+        document.body.classList.add(globalStyles.dragScrolling);
       },
       [wrapper],
     );
 
     const handleWindowMouseMove = useCallback(
       (event) => {
-        if (!prevPosition.current) {
+        if (prevPosition.current === null) {
           return;
         }
 
@@ -97,8 +100,13 @@ const Board = React.memo(
       [prevPosition],
     );
 
-    const handleWindowMouseUp = useCallback(() => {
+    const handleWindowMouseRelease = useCallback(() => {
+      if (prevPosition.current === null) {
+        return;
+      }
+
       prevPosition.current = null;
+      document.body.classList.remove(globalStyles.dragScrolling);
     }, [prevPosition]);
 
     useEffect(() => {
@@ -116,14 +124,20 @@ const Board = React.memo(
     }, [listIds, isListAddOpened]);
 
     useEffect(() => {
-      window.addEventListener('mouseup', handleWindowMouseUp);
       window.addEventListener('mousemove', handleWindowMouseMove);
 
+      window.addEventListener('mouseup', handleWindowMouseRelease);
+      window.addEventListener('blur', handleWindowMouseRelease);
+      window.addEventListener('contextmenu', handleWindowMouseRelease);
+
       return () => {
-        window.removeEventListener('mouseup', handleWindowMouseUp);
         window.removeEventListener('mousemove', handleWindowMouseMove);
+
+        window.removeEventListener('mouseup', handleWindowMouseRelease);
+        window.removeEventListener('blur', handleWindowMouseRelease);
+        window.removeEventListener('contextmenu', handleWindowMouseRelease);
       };
-    }, [handleWindowMouseUp, handleWindowMouseMove]);
+    }, [handleWindowMouseMove, handleWindowMouseRelease]);
 
     return (
       <>

diff --git a/client/src/components/CardModal/DescriptionEdit.jsx b/client/src/components/CardModal/DescriptionEdit.jsx
@@ -44,7 +44,7 @@ const DescriptionEdit = React.forwardRef(({ children, defaultValue, onUpdate },
   );
 
   const handleChildrenClick = useCallback(() => {
-    if (!getSelection().toString()) {
+    if (!window.getSelection().toString()) {
       open();
     }
   }, [open]);

diff --git a/client/src/styles.module.scss b/client/src/styles.module.scss
@@ -146,6 +146,11 @@
     pointer-events: none;
   }
 
+  &.dragScrolling>* {
+    pointer-events: none;
+    user-select: none;
+  }
+
   /* Backgrounds */
 
   .backgroundBerryRed {