From 118a593fd7eaf34c9f9481a94f3e70c79286d3aa Mon Sep 17 00:00:00 2001
From: bosiraphael <raphael.bosi@gmail.com>
Date: Fri, 18 Oct 2024 10:46:10 +0200
Subject: [PATCH] fix reset table row selection when clicking outside

---
 .../components/ActionMenuDropdown.tsx          |  2 +-
 .../record-board/components/RecordBoard.tsx    |  2 +-
 .../components/RecordTableInternalEffect.tsx   | 18 ++++--------------
 .../hooks/internal/useLeaveTableFocus.ts       | 12 +++++++++++-
 4 files changed, 17 insertions(+), 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
index 18ebdac7667e..c05df9b758a2 100644
--- 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
index e9487ea6eb23..129e8fe731cc 100644
--- 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/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableInternalEffect.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableInternalEffect.tsx
index 0dff4b429dca..1f67de6ec0a9 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableInternalEffect.tsx
+++ b/packages/twenty-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/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useLeaveTableFocus.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useLeaveTableFocus.ts
index 0ee3aa62d6a8..fc3f386432aa 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useLeaveTableFocus.ts
+++ b/packages/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,
+    ],
   );
 };