Fix stacking multiple time the same record in the side panel (#12192)

Fixes #12043 

This bug had two distinct root causes:
- The command menu closing wasn't triggering correctly because of a
hotkey scope issue. We reset the hotkey scope to record index inside
`useLeaveTableFocus` but we should do it only when needed
- The portal on top of the table cell didn't stop the propagation of the
click so the table cell was opened twice (once in the portal and once in
the underlying cell)

Before:


https://github.com/user-attachments/assets/16c41135-fff9-4f89-a512-6a7c0e143190


After:


https://github.com/user-attachments/assets/865b6063-5f82-4f44-b0c8-d03f5955d685

packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useLeaveTableFocus.ts

@@ -1,11 +1,9 @@
-import { RecordIndexHotkeyScope } from '@/object-record/record-index/types/RecordIndexHotkeyScope';
 import { useResetTableRowSelection } from '@/object-record/record-table/hooks/internal/useResetTableRowSelection';
 import { useActiveRecordTableRow } from '@/object-record/record-table/hooks/useActiveRecordTableRow';
 import { useFocusedRecordTableRow } from '@/object-record/record-table/hooks/useFocusedRecordTableRow';
 import { useSetIsRecordTableFocusActive } from '@/object-record/record-table/record-table-cell/hooks/useSetIsRecordTableFocusActive';
 import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
 import { recordTableHoverPositionComponentState } from '@/object-record/record-table/states/recordTableHoverPositionComponentState';
-import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 
@@ -36,8 +34,6 @@ export const useLeaveTableFocus = (recordTableId?: string) => {
     recordTableIdFromContext,
   );
 
-  const setHotkeyScope = useSetHotkeyScope();
-
   return () => {
     resetTableRowSelection();
 
@@ -48,7 +44,5 @@ export const useLeaveTableFocus = (recordTableId?: string) => {
     deactivateRecordTableRow();
 
     setRecordTableHoverPosition(null);
-
-    setHotkeyScope(RecordIndexHotkeyScope.RecordIndex);
   };
 };

packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyFocusClickOutsideEffect.tsx

@@ -3,6 +3,7 @@ import { RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID } from '@/object-record/record-t
 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 { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { useRecoilValue } from 'recoil';
@@ -19,6 +20,8 @@ export const RecordTableBodyFocusClickOutsideEffect = ({
 
   const currentHotkeyScope = useRecoilValue(currentHotkeyScopeState);
 
+  const setHotkeyScope = useSetHotkeyScope();
+
   useListenClickOutside({
     excludeClassNames: [
       'bottom-bar',
@@ -38,6 +41,7 @@ export const RecordTableBodyFocusClickOutsideEffect = ({
       }
 
       leaveTableFocus();
+      setHotkeyScope(RecordIndexHotkeyScope.RecordIndex);
     },
   });
 

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.tsx

@@ -27,7 +27,7 @@ const StyledEmptyPlaceholderField = withTheme(styled.div<{ theme: Theme }>`
 
 export type EditableCellDisplayContainerProps = {
   focus?: boolean;
-  onClick?: () => void;
+  onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
   scrollRef?: Ref<HTMLDivElement>;
   isHovered?: boolean;
   onContextMenu?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayMode.tsx

@@ -22,7 +22,8 @@ export const RecordTableCellDisplayMode = ({
     onActionMenuDropdownOpened(event, recordId);
   };
 
-  const handleClick = () => {
+  const handleClick = (event: React.MouseEvent) => {
+    event.stopPropagation();
     if (!isFieldInputOnly && !isReadOnly) {
       openTableCell();
     }