Fix drag to select in dropdowns, context menu and action bar (#1704)

- fix drag to select disable at many locations

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

@@ -1,6 +1,5 @@
 import { useRef } from 'react';
 import styled from '@emotion/styled';
-import { useRecoilValue } from 'recoil';
 
 import { DragSelect } from '@/ui/utilities/drag-select/components/DragSelect';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
@@ -15,7 +14,6 @@ import { useLeaveTableFocus } from '../hooks/useLeaveTableFocus';
 import { useMapKeyboardToSoftFocus } from '../hooks/useMapKeyboardToSoftFocus';
 import { useResetTableRowSelection } from '../hooks/useResetTableRowSelection';
 import { useSetRowSelectedState } from '../hooks/useSetRowSelectedState';
-import { isDraggingAndSelectingState } from '../states/isDraggingAndSelectingState';
 import { TableHeader } from '../table-header/components/TableHeader';
 import { TableHotkeyScope } from '../types/TableHotkeyScope';
 
@@ -90,7 +88,6 @@ type OwnProps = {
 
 export const EntityTable = ({ updateEntityMutation }: OwnProps) => {
   const tableBodyRef = useRef<HTMLDivElement>(null);
-  const isDraggingAndSelecting = useRecoilValue(isDraggingAndSelectingState);
 
   const setRowSelectedState = useSetRowSelectedState();
   const resetTableRowSelection = useResetTableRowSelection();
@@ -135,13 +132,11 @@ export const EntityTable = ({ updateEntityMutation }: OwnProps) => {
               </StyledTable>
             </div>
           </ScrollWrapper>
-          {isDraggingAndSelecting && (
-            <DragSelect
-              dragSelectable={tableBodyRef}
-              onDragSelectionStart={resetTableRowSelection}
-              onDragSelectionChange={setRowSelectedState}
-            />
-          )}
+          <DragSelect
+            dragSelectable={tableBodyRef}
+            onDragSelectionStart={resetTableRowSelection}
+            onDragSelectionChange={setRowSelectedState}
+          />
         </StyledTableContainer>
       </StyledTableWithHeader>
     </EntityUpdateMutationContext.Provider>

front/src/modules/ui/table/options/components/TableOptionsDropdown.tsx

@@ -1,11 +1,10 @@
-import { useRecoilState, useResetRecoilState } from 'recoil';
+import { useResetRecoilState } from 'recoil';
 
 import { DropdownButton } from '@/ui/dropdown/components/DropdownButton';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 import { viewEditModeState } from '@/ui/view-bar/states/viewEditModeState';
 
 import { TableOptionsDropdownId } from '../../constants/TableOptionsDropdownId';
-import { isDraggingAndSelectingState } from '../../states/isDraggingAndSelectingState';
 
 import { TableOptionsDropdownButton } from './TableOptionsDropdownButton';
 import { TableOptionsDropdownContent } from './TableOptionsDropdownContent';
@@ -19,14 +18,6 @@ export const TableOptionsDropdown = ({
 }: TableOptionsDropdownProps) => {
   const resetViewEditMode = useResetRecoilState(viewEditModeState);
 
-  const [, setIsDraggingAndSelecting] = useRecoilState(
-    isDraggingAndSelectingState,
-  );
-
-  const handleClose = () => setIsDraggingAndSelecting(true);
-
-  const handleOpen = () => setIsDraggingAndSelecting(false);
-
   return (
     <DropdownButton
       buttonComponents={<TableOptionsDropdownButton />}
@@ -34,8 +25,6 @@ export const TableOptionsDropdown = ({
       dropdownId={TableOptionsDropdownId}
       dropdownComponents={<TableOptionsDropdownContent />}
       onClickOutside={resetViewEditMode}
-      onClose={handleClose}
-      onOpen={handleOpen}
     />
   );
 };

front/src/modules/ui/table/states/isDraggingAndSelectingState.ts

@@ -1,6 +0,0 @@
-import { atom } from 'recoil';
-
-export const isDraggingAndSelectingState = atom<boolean>({
-  key: 'isDraggingAndSelectingState',
-  default: true,
-});