fix reset table row selection when clicking outside

twentyhq · Oct 18, 2024 · 118a593 · 118a593
1 parent 43efae4
commit 118a593
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 17 deletions.
diff --git a/packages/twenty-front/src/modules/action-menu/components/ActionMenuDropdown.tsx b/packages/twenty-front/src/modules/action-menu/components/ActionMenuDropdown.tsx
@@ -64,7 +64,7 @@ export const ActionMenuDropdown = () => {
   return (
     <StyledContainerActionMenuDropdown
       position={actionMenuDropdownPosition}
-      className="context-menu"
+      className="action-menu-dropdown"
     >
       <Dropdown
         dropdownId={`action-menu-dropdown-${actionMenuId}`}

diff --git a/packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx b/packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx
@@ -66,7 +66,7 @@ export const RecordBoard = () => {
 
   useListenClickOutsideByClassName({
     classNames: ['record-board-card'],
-    excludeClassNames: ['bottom-bar', 'context-menu'],
+    excludeClassNames: ['bottom-bar', 'action-menu-dropdown'],
     callback: resetRecordSelection,
   });
 

diff --git a/...nty-front/src/modules/object-record/record-table/components/RecordTableInternalEffect.tsx b/...nty-front/src/modules/object-record/record-table/components/RecordTableInternalEffect.tsx
@@ -5,10 +5,7 @@ import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTabl
 import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useClickOutsideListener';
-import {
-  ClickOutsideMode,
-  useListenClickOutsideByClassName,
-} from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
+import { useListenClickOutsideByClassName } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 
 type RecordTableInternalEffectProps = {
   recordTableId: string;
@@ -28,14 +25,6 @@ export const RecordTableInternalEffect = ({
     SOFT_FOCUS_CLICK_OUTSIDE_LISTENER_ID,
   );
 
-  useListenClickOutside({
-    refs: [tableBodyRef],
-    callback: () => {
-      leaveTableFocus();
-    },
-    mode: ClickOutsideMode.compareHTMLRef,
-  });
-
   useScopedHotkeys(
     [Key.Escape],
     () => {
@@ -46,9 +35,10 @@ export const RecordTableInternalEffect = ({
 
   useListenClickOutsideByClassName({
     classNames: ['entity-table-cell'],
-    excludeClassNames: ['bottom-bar', 'context-menu'],
+    excludeClassNames: ['bottom-bar', 'action-menu-dropdown'],
     callback: () => {
-      resetTableRowSelection();
+      console.log('click outside');
+      leaveTableFocus();
     },
   });
 

diff --git a/.../twenty-front/src/modules/object-record/record-table/hooks/internal/useLeaveTableFocus.ts b/.../twenty-front/src/modules/object-record/record-table/hooks/internal/useLeaveTableFocus.ts
@@ -6,6 +6,7 @@ import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotV
 
 import { TableHotkeyScope } from '../../types/TableHotkeyScope';
 
+import { useResetTableRowSelection } from '@/object-record/record-table/hooks/internal/useResetTableRowSelection';
 import { useCloseCurrentTableCellInEditMode } from './useCloseCurrentTableCellInEditMode';
 import { useDisableSoftFocus } from './useDisableSoftFocus';
 
@@ -16,6 +17,8 @@ export const useLeaveTableFocus = (recordTableId?: string) => {
 
   const { isSoftFocusActiveState } = useRecordTableStates(recordTableId);
 
+  const resetTableRowSelection = useResetTableRowSelection(recordTableId);
+
   return useRecoilCallback(
     ({ snapshot }) =>
       () => {
@@ -28,6 +31,8 @@ export const useLeaveTableFocus = (recordTableId?: string) => {
           .getLoadable(currentHotkeyScopeState)
           .getValue();
 
+        resetTableRowSelection();
+
         if (!isSoftFocusActive) {
           return;
         }
@@ -39,6 +44,11 @@ export const useLeaveTableFocus = (recordTableId?: string) => {
         closeCurrentCellInEditMode();
         disableSoftFocus();
       },
-    [closeCurrentCellInEditMode, disableSoftFocus, isSoftFocusActiveState],
+    [
+      closeCurrentCellInEditMode,
+      disableSoftFocus,
+      isSoftFocusActiveState,
+      resetTableRowSelection,
+    ],
   );
 };