Disable Cell Hover Effect During Row Selection (#11908)

https://github.com/user-attachments/assets/925c02b7-6e34-4bb6-8f9e-2426de57088c



Closes #11878

packages/twenty-front/src/modules/object-record/record-table/components/RecordTableContent.tsx

@@ -5,6 +5,16 @@ import { RecordTableNoRecordGroupBody } from '@/object-record/record-table/recor
 import { RecordTableRecordGroupsBody } from '@/object-record/record-table/record-table-body/components/RecordTableRecordGroupsBody';
 import { RecordTableHeader } from '@/object-record/record-table/record-table-header/components/RecordTableHeader';
 import { DragSelect } from '@/ui/utilities/drag-select/components/DragSelect';
+import styled from '@emotion/styled';
+import { useState } from 'react';
+
+const StyledTableWithPointerEvents = styled(StyledTable)<{
+  isDragging: boolean;
+}>`
+  & > * {
+    pointer-events: ${({ isDragging }) => (isDragging ? 'none' : 'auto')};
+  }
+`;
 
 export interface RecordTableContentProps {
   tableBodyRef: React.RefObject<HTMLTableElement>;
@@ -20,9 +30,22 @@ export const RecordTableContent = ({
   handleDragSelectionEnd,
   setRowSelected,
   hasRecordGroups,
-}: RecordTableContentProps) => (
+}: RecordTableContentProps) => {
+  const [isDragging, setIsDragging] = useState(false);
+
+  const handleDragStart = () => {
+    setIsDragging(true);
+    handleDragSelectionStart();
+  };
+
+  const handleDragEnd = () => {
+    setIsDragging(false);
+    handleDragSelectionEnd();
+  };
+
+  return (
     <>
-    <StyledTable ref={tableBodyRef}>
+      <StyledTableWithPointerEvents ref={tableBodyRef} isDragging={isDragging}>
         <RecordTableHeader />
         {hasRecordGroups ? (
           <RecordTableRecordGroupsBody />
@@ -31,12 +54,13 @@ export const RecordTableContent = ({
         )}
         <RecordTableStickyEffect />
         <RecordTableStickyBottomEffect />
-    </StyledTable>
+      </StyledTableWithPointerEvents>
       <DragSelect
         dragSelectable={tableBodyRef}
-      onDragSelectionStart={handleDragSelectionStart}
+        onDragSelectionStart={handleDragStart}
         onDragSelectionChange={setRowSelected}
-      onDragSelectionEnd={handleDragSelectionEnd}
+        onDragSelectionEnd={handleDragEnd}
       />
     </>
   );
+};