From 54a969ec311d7d144c9665f46bbefee4e2f819af Mon Sep 17 00:00:00 2001
From: Maksim Eltyshev <meltyshev@gmail.com>
Date: Fri, 22 Nov 2024 16:17:14 +0100
Subject: [PATCH] fix: Disable text selection when drag-scrolling

---
 client/src/components/Board/Board.jsx         | 24 +++++++++++++++----
 .../components/CardModal/DescriptionEdit.jsx  |  2 +-
 client/src/styles.module.scss                 |  5 ++++
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Board/Board.jsx b/client/src/components/Board/Board.jsx
index b3b8acd3..6bfa04f5 100755
--- 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
index 2520b01b..5fa579a8 100755
--- 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
index 4f5b215f..bfdfb2d9 100644
--- 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 {