Fixes table header (#1087)

* Wrap up Front chat

* Wrap up Front chat

* Disable entity selectionwhen starting from menu

front/src/modules/ui/table/components/EntityTable.tsx

@@ -3,9 +3,9 @@ import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 
 import { SelectedSortType, SortType } from '@/ui/filter-n-sort/types/interface';
+import { DragSelect } from '@/ui/utilities/drag-select/components/DragSelect';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 
-import { DragSelect } from '../../../../utils/DragSelect';
 import { useLeaveTableFocus } from '../hooks/useLeaveTableFocus';
 import { useMapKeyboardToSoftFocus } from '../hooks/useMapKeyboardToSoftFocus';
 import { useSetRowSelectedState } from '../hooks/useSetRowSelectedState';
@@ -103,7 +103,6 @@ export function EntityTable<SortField>({
   useUpdateEntityMutation,
 }: OwnProps<SortField>) {
   const tableBodyRef = useRef<HTMLDivElement>(null);
-  const entityTableBodyRef = useRef<HTMLTableSectionElement>(null);
 
   const rowIds = useRecoilValue(tableRowIdsState);
   const setRowSelectedState = useSetRowSelectedState();
@@ -138,11 +137,11 @@ export function EntityTable<SortField>({
           <StyledTableWrapper>
             <StyledTable>
               <EntityTableHeader />
-              <EntityTableBody tbodyRef={entityTableBodyRef} />
+              <EntityTableBody />
             </StyledTable>
           </StyledTableWrapper>
           <DragSelect
-            dragSelectable={entityTableBodyRef}
+            dragSelectable={tableBodyRef}
             onDragSelectionStart={resetSelections}
             onDragSelectionChange={setRowSelectedState}
           />

front/src/modules/ui/table/components/EntityTableBody.tsx

@@ -1,4 +1,3 @@
-import { Ref } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { isNavbarSwitchingSizeState } from '@/ui/layout/states/isNavbarSwitchingSizeState';
@@ -10,11 +9,7 @@ import { tableRowIdsState } from '../states/tableRowIdsState';
 
 import { EntityTableRow } from './EntityTableRow';
 
-type OwnProps = {
+export function EntityTableBody() {
-  tbodyRef: Ref<HTMLTableSectionElement>;
-};
-
-export function EntityTableBody({ tbodyRef }: OwnProps) {
   const rowIds = useRecoilValue(tableRowIdsState);
 
   const isNavbarSwitchingSize = useRecoilValue(isNavbarSwitchingSizeState);
@@ -28,7 +23,7 @@ export function EntityTableBody({ tbodyRef }: OwnProps) {
   }
 
   return (
-    <tbody ref={tbodyRef}>
+    <tbody>
       {rowIds.map((rowId, index) => (
         <RowIdContext.Provider value={rowId} key={rowId}>
           <RowIndexContext.Provider value={index}>

front/src/modules/ui/table/components/EntityTableHeader.tsx

@@ -188,7 +188,7 @@ export function EntityTableHeader() {
   );
 
   return (
-    <thead>
+    <thead data-select-disable>
       <tr>
         <th
           style={{

front/src/modules/ui/utilities/drag-select/components/DragSelect.tsx

@@ -16,6 +16,17 @@ export function DragSelect({
   onDragSelectionStart,
 }: OwnProps) {
   const { DragSelection } = useSelectionContainer({
+    shouldStartSelecting: (target) => {
+      if (target instanceof HTMLElement) {
+        let el = target;
+        while (el.parentElement && !el.dataset.selectDisable) {
+          el = el.parentElement;
+        }
+
+        return el.dataset.selectDisable !== 'true';
+      }
+      return true;
+    },
     onSelectionStart: onDragSelectionStart,
     onSelectionChange: (box) => {
       const scrollAwareBox = {