Fix unclosable cell (#5776)

In some cases we couldn't open a table cell if the soft focus was still
on another.

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

@@ -6,6 +6,7 @@ import { useFieldFocus } from '@/object-record/record-field/hooks/useFieldFocus'
 import { RecordTableContext } from '@/object-record/record-table/contexts/RecordTableContext';
 import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext';
 import { useCurrentTableCellPosition } from '@/object-record/record-table/record-table-cell/hooks/useCurrentCellPosition';
+import { useOpenRecordTableCellFromCell } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellFromCell';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 
 import { CellHotkeyScopeContext } from '../../contexts/CellHotkeyScopeContext';
@@ -37,6 +38,7 @@ export const RecordTableCellContainer = ({
   editHotkeyScope,
 }: RecordTableCellContainerProps) => {
   const { setIsFocused } = useFieldFocus();
+  const { openTableCell } = useOpenRecordTableCellFromCell();
 
   const { isSelected, recordId, isPendingRow } = useContext(
     RecordTableRowContext,
@@ -71,6 +73,12 @@ export const RecordTableCellContainer = ({
     setIsHovered(false);
   };
 
+  const handleContainerClick = () => {
+    if (!hasSoftFocus) {
+      openTableCell();
+    }
+  };
+
   useEffect(() => {
     const customEventListener = (event: any) => {
       const newHasSoftFocus = event.detail;
@@ -129,6 +137,7 @@ export const RecordTableCellContainer = ({
           onMouseEnter={handleContainerMouseEnter}
           onMouseLeave={handleContainerMouseLeave}
           onMouseMove={handleContainerMouseEnter}
+          onClick={handleContainerClick}
           className={clsx({
             [styles.cellBaseContainer]: true,
             [styles.cellBaseContainerSoftFocus]: hasSoftFocus,

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

@@ -11,11 +11,14 @@ import { useIsFieldInputOnly } from '@/object-record/record-field/hooks/useIsFie
 import { useToggleEditOnlyInput } from '@/object-record/record-field/hooks/useToggleEditOnlyInput';
 import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext';
 import { RecordTableRowContext } from '@/object-record/record-table/contexts/RecordTableRowContext';
+import { useCloseCurrentTableCellInEditMode } from '@/object-record/record-table/hooks/internal/useCloseCurrentTableCellInEditMode';
 import { RecordTableCellButton } from '@/object-record/record-table/record-table-cell/components/RecordTableCellButton';
+import { useCurrentTableCellPosition } from '@/object-record/record-table/record-table-cell/hooks/useCurrentCellPosition';
 import { useOpenRecordTableCellFromCell } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellFromCell';
 import { isSoftFocusUsingMouseState } from '@/object-record/record-table/states/isSoftFocusUsingMouseState';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { isNonTextWritingKey } from '@/ui/utilities/hotkey/utils/isNonTextWritingKey';
+import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { isDefined } from '~/utils/isDefined';
 
 import { TableHotkeyScope } from '../../types/TableHotkeyScope';
@@ -32,7 +35,7 @@ export const RecordTableCellSoftFocusMode = ({
   nonEditModeContent,
 }: RecordTableCellSoftFocusModeProps) => {
   const { columnIndex } = useContext(RecordTableCellContext);
-
+  const closeCurrentTableCell = useCloseCurrentTableCellInEditMode();
   const { isReadOnly } = useContext(RecordTableRowContext);
 
   const { openTableCell } = useOpenRecordTableCellFromCell();
@@ -127,6 +130,18 @@ export const RecordTableCellSoftFocusMode = ({
     */
   };
 
+  const { column, row } = useCurrentTableCellPosition();
+
+  useListenClickOutside({
+    refs: [scrollRef],
+    callback: () => {
+      closeCurrentTableCell();
+      document.dispatchEvent(
+        new CustomEvent(`soft-focus-move-${row}:${column}`, { detail: false }),
+      );
+    },
+  });
+
   const isFirstColumn = columnIndex === 0;
   const customButtonIcon = useGetButtonIcon();
   const buttonIcon = isFirstColumn