[Timeline]: fixed blur calling while dragging/resizing/etc.

epam · Jul 30, 2024 · 0c984ae · 0c984ae
1 parent b347850
commit 0c984ae
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 10 deletions.
diff --git a/uui-components/src/table/DataTableHeaderCell.tsx b/uui-components/src/table/DataTableHeaderCell.tsx
@@ -51,13 +51,20 @@ export class DataTableHeaderCell<TItem, TId> extends React.Component<DataTableHe
         }
     }
 
+    selectOnDragHandler = (e: Event) => {
+        if (this.state.isResizing) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    };
+
     onResizeStart = (e: React.MouseEvent) => {
         this.setState({ isResizing: true, resizeStartX: e.clientX, originalWidth: this.props.column.width });
 
         document.addEventListener('mousemove', this.onResize);
         document.addEventListener('click', this.onResizeEnd);
+        document.addEventListener('selectstart', this.selectOnDragHandler);
 
-        e.preventDefault();
         e.stopPropagation(); // to prevent column sorting/dnd/ect. handlers while resizing
     };
 
@@ -66,6 +73,7 @@ export class DataTableHeaderCell<TItem, TId> extends React.Component<DataTableHe
 
         document.removeEventListener('mousemove', this.onResize);
         document.removeEventListener('click', this.onResizeEnd);
+        document.removeEventListener('selectstart', this.selectOnDragHandler);
 
         e.preventDefault();
         e.stopPropagation(); // to prevent column sorting/dnd/ect. handlers while resizing

diff --git a/uui-core/src/services/dnd/DndActor.tsx b/uui-core/src/services/dnd/DndActor.tsx
@@ -62,18 +62,27 @@ function TREE_SHAKEABLE_INIT() {
             this.context?.uuiDnD?.subscribe?.(this.contextUpdateHandler);
             window.addEventListener('pointerup', this.windowPointerUpHandler);
             window.addEventListener('pointermove', this.windowPointerMoveHandler);
+            window.addEventListener('selectstart', this.selectOnDragHandler);
         }
 
         componentWillUnmount() {
             window.removeEventListener('pointerup', this.windowPointerUpHandler);
             window.removeEventListener('pointermove', this.windowPointerMoveHandler);
+            window.removeEventListener('selectstart', this.selectOnDragHandler);
             this.context.uuiDnD.unsubscribe(this.contextUpdateHandler);
         }
 
         contextUpdateHandler = (dndContextState: DndContextState) => {
             this.setState({ dndContextState });
         };
 
+        selectOnDragHandler = (e: Event) => {
+            if (this.state.isDragging || this.state.isMouseDown) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        };
+
         windowPointerUpHandler = () => {
             if (this.state.isDragging || this.state.isMouseDown) {
                 this.setState(() => initialState);
@@ -237,12 +246,16 @@ function TREE_SHAKEABLE_INIT() {
                             };
                         });
 
-                        if (!isEventTargetInsideInput(e, e.currentTarget)) {
-                            // This prevents text selection start
-                            // dnd don't work without it in ff
-                            e.preventDefault();
-                            e.stopPropagation();
-                        }
+                        // if (!isEventTargetInsideInput(e, e.currentTarget)) {
+                        //     // This prevents text selection start
+                        //     // dnd don't work without it in ff
+                        //     // setTimeout(() => {
+                        //     //     e.preventDefault();
+                        //     // }, 0);
+                        //     // console.log('e', e.target);
+
+                        //     // e.stopPropagation();
+                        // }
                     }
                 };
             }
@@ -281,6 +294,7 @@ function TREE_SHAKEABLE_INIT() {
                     if (isEventTargetInsideDraggable(e, e.currentTarget)) {
                         return;
                     }
+
                     e.preventDefault();
                     if (!!this.state.position) {
                         this.props.onDrop && this.props.onDrop({

diff --git a/uui-timeline/src/TimelineController.ts b/uui-timeline/src/TimelineController.ts
@@ -117,16 +117,19 @@ export class TimelineController {
         );
     }
 
+    selectOnDragHandler = (e: Event) => {
+        e.preventDefault();
+        e.stopPropagation();
+    };
+
     public startDrag = (e: React.MouseEvent<HTMLElement>) => {
         if (e.nativeEvent.which === 1) {
             // If left click
             this.isDragging = true;
             this.dragStartViewport = this.currentViewport;
             this.dragStartMouseX = this.screenMouseX;
         }
-
-        // Prevent text selection of drag start
-        e.preventDefault();
+        window.addEventListener('selectstart', this.selectOnDragHandler);
     };
 
     public handleWheelEvent = (e: WheelEvent) => {
@@ -369,9 +372,11 @@ export class TimelineController {
 
     private handleMouseUp = () => {
         this.isDragging = false;
+        window.removeEventListener('selectstart', this.selectOnDragHandler);
     };
 
     private handleMouseLeave = () => {
         this.isDragging = false;
+        window.removeEventListener('selectstart', this.selectOnDragHandler);
     };
 }