fix(frontend): prevent command menu reopening when clicking the same field (#12390)

ressolve #12205
This PR fixes the issue where the record in the command menu was
reopening when clicking the same field again.

https://github.com/user-attachments/assets/52da7b3f-4704-4a9c-8fc4-29534568b0c0




- Added recordId to cells so it can be accessed when
useListenClickOutside is triggered, and compared the previous recordId
with the new one to prevent closing the command menu for the same
record.

- When the field is clicked, we compare the lastRecordId with the new
recordId inside the openRecordInCommandMenu function to avoid reopening
the menu unnecessarily.

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/command-menu/components/CommandMenuOpenContainer.tsx

@@ -3,6 +3,7 @@ import { COMMAND_MENU_CLICK_OUTSIDE_ID } from '@/command-menu/constants/CommandM
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { CommandMenuAnimationVariant } from '@/command-menu/types/CommandMenuAnimationVariant';
 import { CommandMenuHotkeyScope } from '@/command-menu/types/CommandMenuHotkeyScope';
+import { RECORD_CHIP_CLICK_OUTSIDE_ID } from '@/object-record/record-table/constants/RecordChipClickOutsideId';
 import { RootStackingContextZIndices } from '@/ui/layout/constants/RootStackingContextZIndices';
 import { PAGE_HEADER_COMMAND_MENU_BUTTON_CLICK_OUTSIDE_ID } from '@/ui/layout/page-header/constants/PageHeaderCommandMenuButtonClickOutsideId';
 import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState';
@@ -68,6 +69,7 @@ export const CommandMenuOpenContainer = ({
     excludedClickOutsideIds: [
       PAGE_HEADER_COMMAND_MENU_BUTTON_CLICK_OUTSIDE_ID,
       LINK_CHIP_CLICK_OUTSIDE_ID,
+      RECORD_CHIP_CLICK_OUTSIDE_ID,
     ],
   });
 

packages/twenty-front/src/modules/command-menu/hooks/useOpenRecordInCommandMenu.ts

@@ -41,6 +41,13 @@ export const useOpenRecordInCommandMenu = () => {
         objectNameSingular: string;
         isNewRecord?: boolean;
       }) => {
+        const lastRecordId = snapshot
+          .getLoadable(viewableRecordIdState)
+          .getValue();
+        if (lastRecordId === recordId) {
+          return;
+        }
+
         const pageComponentInstanceId = v4();
 
         set(

packages/twenty-front/src/modules/object-record/record-table/constants/RecordChipClickOutsideId.ts

@@ -0,0 +1 @@
+export const RECORD_CHIP_CLICK_OUTSIDE_ID = 'record-chip-click-outside-id';

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

@@ -3,6 +3,8 @@ import { ReactNode, useContext } from 'react';
 
 import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 import { useFieldFocus } from '@/object-record/record-field/hooks/useFieldFocus';
+import { isFieldIdentifierDisplay } from '@/object-record/record-field/meta-types/display/utils/isFieldIdentifierDisplay';
+import { RECORD_CHIP_CLICK_OUTSIDE_ID } from '@/object-record/record-table/constants/RecordChipClickOutsideId';
 import { useRecordTableBodyContextOrThrow } from '@/object-record/record-table/contexts/RecordTableBodyContext';
 import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext';
 import { useOpenRecordTableCellFromCell } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellFromCell';
@@ -57,13 +59,18 @@ export const RecordTableCellBaseContainer = ({
 }: {
   children: ReactNode;
 }) => {
-  const { isReadOnly } = useContext(FieldContext);
+  const { isReadOnly, fieldDefinition, isLabelIdentifier } =
+    useContext(FieldContext);
   const { setIsFocused } = useFieldFocus();
   const { openTableCell } = useOpenRecordTableCellFromCell();
   const { theme } = useContext(ThemeContext);
 
   const { cellPosition } = useContext(RecordTableCellContext);
 
+  const isChipDisplay = isFieldIdentifierDisplay(
+    fieldDefinition,
+    isLabelIdentifier,
+  );
   const { onMoveHoverToCurrentCell, onCellMouseEnter } =
     useRecordTableBodyContextOrThrow();
 
@@ -98,6 +105,9 @@ export const RecordTableCellBaseContainer = ({
       borderColorBlue={theme.adaptiveColors.blue4}
       isReadOnly={isReadOnly ?? false}
       id={`record-table-cell-${cellPosition.column}-${cellPosition.row}`}
+      data-click-outside-id={
+        isChipDisplay ? RECORD_CHIP_CLICK_OUTSIDE_ID : undefined
+      }
     >
       {children}
     </StyledBaseContainer>

packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/useListenClickOutside.ts

@@ -92,7 +92,6 @@ export const useListenClickOutside = <T extends Element>({
 
         while (currentElement) {
           const currentDataAttributes = currentElement.dataset;
-
           const isGloballyExcluded =
             currentDataAttributes?.globallyPreventClickOutside === 'true';