[DataGridPro] Prevent text selection when reordering rows (#16568)

Co-authored-by: Armin Mehinovic <[email protected]>

Author: jyash97

packages/x-data-grid-pro/src/components/GridRowReorderCell.tsx

@@ -9,6 +9,7 @@ import {
   useGridApiContext,
   useGridSelector,
   getDataGridUtilityClass,
+  gridClasses,
 } from '@mui/x-data-grid';
 import { gridEditRowsStateSelector, isEventTargetInPortal } from '@mui/x-data-grid/internals';
 import type { DataGridProProcessedProps } from '../models/dataGridProProps';
@@ -77,11 +78,34 @@ function GridRowReorderCell(params: GridRenderCellParams) {
     [apiRef, params.id],
   );
 
+  const handleMouseDown = React.useCallback(() => {
+    // Prevent text selection as it will block all the drag events. More context: https://github.com/mui/mui-x/issues/16303
+    apiRef.current.rootElementRef?.current?.classList.add(
+      gridClasses['root--disableUserSelection'],
+    );
+  }, [apiRef]);
+
+  const handleMouseUp = React.useCallback(() => {
+    apiRef.current.rootElementRef?.current?.classList.remove(
+      gridClasses['root--disableUserSelection'],
+    );
+  }, [apiRef]);
+
+  const handleDragEnd = React.useCallback(
+    (event: React.MouseEvent<HTMLDivElement>) => {
+      handleMouseUp();
+      publish('rowDragEnd')(event);
+    },
+    [publish, handleMouseUp],
+  );
+
   const draggableEventHandlers = isDraggable
     ? {
         onDragStart: publish('rowDragStart'),
         onDragOver: publish('rowDragOver'),
-        onDragEnd: publish('rowDragEnd'),
+        onDragEnd: handleDragEnd,
+        onMouseDown: handleMouseDown,
+        onMouseUp: handleMouseUp,
       }
     : null;
 

packages/x-data-grid/src/components/containers/GridRootStyles.ts

@@ -593,7 +593,7 @@ export const GridRootStyles = styled('div', {
         borderTop: 'none',
       },
     },
-    [`&.${c['root--disableUserSelection']} .${c.cell}`]: {
+    [`&.${c['root--disableUserSelection']}`]: {
       userSelect: 'none',
     },
     [`& .${c['row--dynamicHeight']} > .${c.cell}`]: {