From fe9de195c3c54442287cb6dcd52833c9074ee917 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?=
 <71827178+bosiraphael@users.noreply.github.com>
Date: Thu, 10 Jul 2025 14:40:05 +0200
Subject: [PATCH] Fix record table click outside (#13149)

Fixes https://github.com/twentyhq/twenty/issues/13139 introduced by
https://github.com/twentyhq/twenty/pull/13127

The record table click outside was triggered when it shouldn't have been
(clicking inside a dropdown in the side panel).
This PR fixes it by checking the type of the focused element before
triggering the click outside.
Before, we had a check on the current hotkey scope but I removed this
part during the refactoring and I didn't replace it thinking that it
wasn't useful anymore.

Video QA:



https://github.com/user-attachments/assets/68baa9e6-2593-4840-923b-d631c806d9ea
---
 .../RecordTableBodyFocusClickOutsideEffect.tsx   | 16 ++++++++++++++++
 .../focus/states/currentFocusedItemSelector.ts   | 12 ++++++++++++
 2 files changed, 28 insertions(+)
 create mode 100644 packages/twenty-front/src/modules/ui/utilities/focus/states/currentFocusedItemSelector.ts

diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyFocusClickOutsideEffect.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyFocusClickOutsideEffect.tsx
index 9a5fdc837..31a602504 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyFocusClickOutsideEffect.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyFocusClickOutsideEffect.tsx
@@ -5,7 +5,10 @@ import { useRecordTableContextOrThrow } from '@/object-record/record-table/conte
 import { useLeaveTableFocus } from '@/object-record/record-table/hooks/internal/useLeaveTableFocus';
 import { MODAL_BACKDROP_CLICK_OUTSIDE_ID } from '@/ui/layout/modal/constants/ModalBackdropClickOutsideId';
 import { PAGE_ACTION_CONTAINER_CLICK_OUTSIDE_ID } from '@/ui/layout/page/constants/PageActionContainerClickOutsideId';
+import { currentFocusedItemSelector } from '@/ui/utilities/focus/states/currentFocusedItemSelector';
+import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
+import { useRecoilValue } from 'recoil';
 type RecordTableBodyFocusClickOutsideEffectProps = {
   tableBodyRef: React.RefObject<HTMLDivElement>;
 };
@@ -17,6 +20,10 @@ export const RecordTableBodyFocusClickOutsideEffect = ({
 
   const leaveTableFocus = useLeaveTableFocus(recordTableId);
 
+  const currentFocusedItem = useRecoilValue(currentFocusedItemSelector);
+
+  const componentType = currentFocusedItem?.componentInstance.componentType;
+
   useListenClickOutside({
     excludedClickOutsideIds: [
       ACTION_MENU_DROPDOWN_CLICK_OUTSIDE_ID,
@@ -27,6 +34,15 @@ export const RecordTableBodyFocusClickOutsideEffect = ({
     listenerId: RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID,
     refs: [tableBodyRef],
     callback: () => {
+      if (
+        componentType !== FocusComponentType.PAGE &&
+        componentType !== FocusComponentType.RECORD_TABLE &&
+        componentType !== FocusComponentType.RECORD_TABLE_ROW &&
+        componentType !== FocusComponentType.RECORD_TABLE_CELL
+      ) {
+        return;
+      }
+
       leaveTableFocus();
     },
   });
diff --git a/packages/twenty-front/src/modules/ui/utilities/focus/states/currentFocusedItemSelector.ts b/packages/twenty-front/src/modules/ui/utilities/focus/states/currentFocusedItemSelector.ts
new file mode 100644
index 000000000..e532fac86
--- /dev/null
+++ b/packages/twenty-front/src/modules/ui/utilities/focus/states/currentFocusedItemSelector.ts
@@ -0,0 +1,12 @@
+import { FocusStackItem } from '@/ui/utilities/focus/types/FocusStackItem';
+import { selector } from 'recoil';
+import { focusStackState } from './focusStackState';
+
+export const currentFocusedItemSelector = selector<FocusStackItem | undefined>({
+  key: 'currentFocusedItemSelector',
+  get: ({ get }) => {
+    const focusStack = get(focusStackState);
+
+    return focusStack.at(-1);
+  },
+});