Fix save record table cell when clicking outside table (#8230)

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

@@ -1,19 +1,26 @@
 import { Key } from 'ts-key-enum';
 
+import { RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID } from '@/object-record/record-table/constants/RecordTableClickOutsideListenerId';
+import { useLeaveTableFocus } from '@/object-record/record-table/hooks/internal/useLeaveTableFocus';
 import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
 import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
-import { useListenClickOutsideByClassName } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
+import { useListenClickOutsideV2 } from '@/ui/utilities/pointer-event/hooks/useListenClickOutsideV2';
 
 type RecordTableInternalEffectProps = {
   recordTableId: string;
+  tableBodyRef: React.RefObject<HTMLDivElement>;
 };
 
 export const RecordTableInternalEffect = ({
   recordTableId,
+  tableBodyRef,
 }: RecordTableInternalEffectProps) => {
-  const { leaveTableFocus, resetTableRowSelection, useMapKeyboardToSoftFocus } =
+  const leaveTableFocus = useLeaveTableFocus(recordTableId);
-    useRecordTable({ recordTableId });
+
+  const { resetTableRowSelection, useMapKeyboardToSoftFocus } = useRecordTable({
+    recordTableId,
+  });
 
   useMapKeyboardToSoftFocus();
 
@@ -25,9 +32,9 @@ export const RecordTableInternalEffect = ({
     TableHotkeyScope.Table,
   );
 
-  useListenClickOutsideByClassName({
+  useListenClickOutsideV2({
-    classNames: ['entity-table-cell'],
+    listenerId: RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID,
-    excludeClassNames: ['bottom-bar', 'action-menu-dropdown', 'command-menu'],
+    refs: [tableBodyRef],
     callback: () => {
       leaveTableFocus();
     },

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

@@ -87,7 +87,10 @@ export const RecordTableWithWrappers = ({
                   onDragSelectionChange={setRowSelected}
                 />
               </StyledTableInternalContainer>
-              <RecordTableInternalEffect recordTableId={recordTableId} />
+              <RecordTableInternalEffect
+                tableBodyRef={tableBodyRef}
+                recordTableId={recordTableId}
+              />
             </StyledTableContainer>
           </StyledTableWithHeader>
         </RecordUpdateContext.Provider>

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

@@ -0,0 +1 @@
+export const RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID = 'record-table';

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

@@ -1,19 +1,13 @@
 import { useRecoilCallback } from 'recoil';
 
 import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates';
-import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState';
 import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 
-import { TableHotkeyScope } from '../../types/TableHotkeyScope';
-
 import { useResetTableRowSelection } from '@/object-record/record-table/hooks/internal/useResetTableRowSelection';
-import { useCloseCurrentTableCellInEditMode } from './useCloseCurrentTableCellInEditMode';
 import { useDisableSoftFocus } from './useDisableSoftFocus';
 
 export const useLeaveTableFocus = (recordTableId?: string) => {
   const disableSoftFocus = useDisableSoftFocus(recordTableId);
-  const closeCurrentCellInEditMode =
-    useCloseCurrentTableCellInEditMode(recordTableId);
 
   const { isSoftFocusActiveState } = useRecordTableStates(recordTableId);
 
@@ -27,28 +21,14 @@ export const useLeaveTableFocus = (recordTableId?: string) => {
           isSoftFocusActiveState,
         );
 
-        const currentHotkeyScope = snapshot
-          .getLoadable(currentHotkeyScopeState)
-          .getValue();
-
         resetTableRowSelection();
 
         if (!isSoftFocusActive) {
           return;
         }
 
-        if (currentHotkeyScope?.scope === TableHotkeyScope.Table) {
-          return;
-        }
-
-        closeCurrentCellInEditMode();
         disableSoftFocus();
       },
-    [
+    [disableSoftFocus, isSoftFocusActiveState, resetTableRowSelection],
-      closeCurrentCellInEditMode,
-      disableSoftFocus,
-      isSoftFocusActiveState,
-      resetTableRowSelection,
-    ],
   );
 };

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

@@ -4,10 +4,19 @@ import { FieldInput } from '@/object-record/record-field/components/FieldInput';
 import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 import { useIsFieldReadOnly } from '@/object-record/record-field/hooks/useIsFieldReadOnly';
 import { FieldInputEvent } from '@/object-record/record-field/types/FieldInputEvent';
+import { RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID } from '@/object-record/record-table/constants/RecordTableClickOutsideListenerId';
 import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext';
 import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId';
+import { useClickOustideListenerStates } from '@/ui/utilities/pointer-event/hooks/useClickOustideListenerStates';
+import { useSetRecoilState } from 'recoil';
 
 export const RecordTableCellFieldInput = () => {
+  const { getClickOutsideListenerIsActivatedState } =
+    useClickOustideListenerStates(RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID);
+  const setClickOutsideListenerIsActivated = useSetRecoilState(
+    getClickOutsideListenerIsActivatedState,
+  );
+
   const { onUpsertRecord, onMoveFocus, onCloseTableCell } =
     useContext(RecordTableContext);
 
@@ -40,6 +49,8 @@ export const RecordTableCellFieldInput = () => {
   };
 
   const handleClickOutside: FieldInputEvent = (persistField) => {
+    setClickOutsideListenerIsActivated(false);
+
     onUpsertRecord({
       persistField,
       recordId,

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2.ts

@@ -21,6 +21,8 @@ import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
 import { isDefined } from '~/utils/isDefined';
 
 import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext';
+import { RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID } from '@/object-record/record-table/constants/RecordTableClickOutsideListenerId';
+import { useClickOustideListenerStates } from '@/ui/utilities/pointer-event/hooks/useClickOustideListenerStates';
 import { useContext } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { TableHotkeyScope } from '../../types/TableHotkeyScope';
@@ -42,6 +44,9 @@ export type OpenTableCellArgs = {
 };
 
 export const useOpenRecordTableCellV2 = (tableScopeId: string) => {
+  const { getClickOutsideListenerIsActivatedState } =
+    useClickOustideListenerStates(RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID);
+
   const { indexIdentifierUrl } = useContext(RecordIndexRootPropsContext);
   const moveEditModeToTableCellPosition =
     useMoveEditModeToTableCellPosition(tableScopeId);
@@ -65,7 +70,7 @@ export const useOpenRecordTableCellV2 = (tableScopeId: string) => {
   const navigate = useNavigate();
 
   const openTableCell = useRecoilCallback(
-    ({ snapshot }) =>
+    ({ snapshot, set }) =>
       ({
         initialValue,
         cellPosition,
@@ -80,6 +85,8 @@ export const useOpenRecordTableCellV2 = (tableScopeId: string) => {
           return;
         }
 
+        set(getClickOutsideListenerIsActivatedState, false);
+
         const isFirstColumnCell = cellPosition.column === 0;
 
         const fieldValue = getSnapshotValue(
@@ -137,17 +144,18 @@ export const useOpenRecordTableCellV2 = (tableScopeId: string) => {
         }
       },
     [
+      getClickOutsideListenerIsActivatedState,
       setDragSelectionStartEnabled,
+      moveEditModeToTableCellPosition,
+      initDraftValue,
       toggleClickOutsideListener,
       leaveTableFocus,
-      setHotkeyScope,
+      navigate,
-      initDraftValue,
+      indexIdentifierUrl,
-      moveEditModeToTableCellPosition,
-      openRightDrawer,
       setViewableRecordId,
       setViewableRecordNameSingular,
-      indexIdentifierUrl,
+      openRightDrawer,
-      navigate,
+      setHotkeyScope,
     ],
   );