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

- fix drag to select disable at many locations

front/src/modules/people/components/PeopleCard.tsx

@@ -164,7 +164,11 @@ export const PeopleCard = ({
             Icon={IconDotsVertical}
           />
           {isOptionsOpen && (
-            <StyledDropdownMenu ref={refs.setFloating} style={floatingStyles}>
+            <StyledDropdownMenu
+              data-select-disable
+              ref={refs.setFloating}
+              style={floatingStyles}
+            >
               <StyledDropdownMenuItemsContainer
                 onClick={(e) => e.stopPropagation()}
               >

front/src/modules/spreadsheet-import/components/MatchColumnSelect.tsx

@@ -117,6 +117,7 @@ export const MatchColumnSelect = ({
         createPortal(
           <StyledFloatingDropdown ref={refs.setFloating} style={floatingStyles}>
             <StyledDropdownMenu
+              data-select-disable
               ref={dropdownContainerRef}
               width={refs.domReference.current?.clientWidth}
             >

front/src/modules/ui/action-bar/components/ActionBar.tsx

@@ -43,7 +43,11 @@ export const ActionBar = ({ selectedIds }: OwnProps) => {
     return null;
   }
   return (
-    <StyledContainerActionBar className="action-bar" ref={wrapperRef}>
+    <StyledContainerActionBar
+      data-select-disable
+      className="action-bar"
+      ref={wrapperRef}
+    >
       {actionBarEntries.map((item) => (
         <ActionBarItem
           Icon={item.Icon}

front/src/modules/ui/board/components/BoardColumnMenu.tsx

@@ -127,7 +127,7 @@ export const BoardColumnMenu = ({
 
   return (
     <StyledMenuContainer ref={boardColumnMenuRef}>
-      <StyledDropdownMenu>
+      <StyledDropdownMenu data-select-disable>
         {currentMenu === 'actions' && (
           <StyledDropdownMenuItemsContainer>
             <MenuItem

front/src/modules/ui/context-menu/components/ContextMenu.tsx

@@ -66,7 +66,7 @@ export const ContextMenu = ({ selectedIds }: OwnProps) => {
       ref={wrapperRef}
       position={contextMenuPosition}
     >
-      <StyledDropdownMenu>
+      <StyledDropdownMenu data-select-disable>
         <StyledDropdownMenuItemsContainer>
           {contextMenuEntries.map((item) => (
             <ContextMenuItem

front/src/modules/ui/dropdown/components/DropdownButton.tsx

@@ -91,7 +91,7 @@ export const DropdownButton = ({
         <div ref={refs.setReference}>{buttonComponents}</div>
       )}
       {isDropdownButtonOpen && (
-        <div ref={refs.setFloating} style={floatingStyles}>
+        <div data-select-disable ref={refs.setFloating} style={floatingStyles}>
           {dropdownComponents}
         </div>
       )}

front/src/modules/ui/input/relation-picker/components/MultipleEntitySelect.tsx

@@ -72,7 +72,7 @@ export const MultipleEntitySelect = <
   });
 
   return (
-    <StyledDropdownMenu ref={containerRef}>
+    <StyledDropdownMenu ref={containerRef} data-select-disable>
       <DropdownMenuSearchInput
         value={searchFilter}
         onChange={handleFilterChange}

front/src/modules/ui/input/relation-picker/components/SingleEntitySelect.tsx

@@ -62,6 +62,7 @@ export const SingleEntitySelect = <
       disableBlur={disableBackgroundBlur}
       ref={containerRef}
       width={width}
+      data-select-disable
     >
       <DropdownMenuSearchInput
         value={searchFilter}

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
-            <DragSelect
+            dragSelectable={tableBodyRef}
-              dragSelectable={tableBodyRef}
+            onDragSelectionStart={resetTableRowSelection}
-              onDragSelectionStart={resetTableRowSelection}
+            onDragSelectionChange={setRowSelectedState}
-              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,
-});

front/src/modules/ui/view-bar/components/SingleEntityFilterDropdownButton.tsx

@@ -94,7 +94,7 @@ export const SingleEntityFilterDropdownButton = ({
   };
 
   return (
-    <StyledDropdownButtonContainer>
+    <StyledDropdownButtonContainer data-select-disable>
       <StyledHeaderDropdownButton
         isUnfolded={isFilterDropdownUnfolded}
         onClick={() => handleIsUnfoldedChange(!isFilterDropdownUnfolded)}