From dfe801194814a3ad0a8b936fa636f90f15f2ea5c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?=
 <71827178+bosiraphael@users.noreply.github.com>
Date: Tue, 13 May 2025 17:56:04 +0200
Subject: [PATCH] Fix side panel click outside (#12011)

Fixes https://github.com/twentyhq/twenty/issues/11988

## Description

The issue came from `RecordTableBodyFocusClickOutsideEffect`.
When clicking outside the table with the side panel opened, two click
outside listeners were triggered: the one which closes the side panel
and the one which leaves the table focus. There was a race condition and
the leave table focus was executed first, changing the hotkey scope. The
side panel closure wasn't executed because the hotkey scope was wrong.

## Fix
Only leave the table focus if the hotkey scope is `TableFocus`


## Videos

Before:


https://github.com/user-attachments/assets/0ea666a6-c212-4b94-b89b-49211d18a13b


After:


https://github.com/user-attachments/assets/2ec6d593-ff65-4cbf-ac92-a0cfbd7dfd8b
---
 .../RecordTableBodyFocusClickOutsideEffect.tsx         | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

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 a7fd3b2a9..8b6559182 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
@@ -1,8 +1,10 @@
 import { RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID } from '@/object-record/record-table/constants/RecordTableClickOutsideListenerId';
 import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
 import { useLeaveTableFocus } from '@/object-record/record-table/hooks/internal/useLeaveTableFocus';
+import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope';
+import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
-
+import { useRecoilValue } from 'recoil';
 type RecordTableBodyFocusClickOutsideEffectProps = {
   tableBodyRef: React.RefObject<HTMLDivElement>;
 };
@@ -14,6 +16,8 @@ export const RecordTableBodyFocusClickOutsideEffect = ({
 
   const leaveTableFocus = useLeaveTableFocus(recordTableId);
 
+  const currentHotkeyScope = useRecoilValue(currentHotkeyScopeState);
+
   useListenClickOutside({
     excludeClassNames: [
       'bottom-bar',
@@ -25,6 +29,10 @@ export const RecordTableBodyFocusClickOutsideEffect = ({
     listenerId: RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID,
     refs: [tableBodyRef],
     callback: () => {
+      if (currentHotkeyScope.scope !== TableHotkeyScope.TableFocus) {
+        return;
+      }
+
       leaveTableFocus();
     },
   });