Fixed soft focus stuck (#5639)

Soft focus could be stuck when exiting edit mode, in some cases it would
prevent to have soft focus if just moving the mouse into a cell.

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

@@ -2,6 +2,7 @@ import { useRecoilCallback } from 'recoil';
 
 import { useMoveSoftFocusToCellOnHoverV2 } from '@/object-record/record-table/record-table-cell/hooks/useMoveSoftFocusToCellOnHoverV2';
 import { currentTableCellInEditModePositionComponentState } from '@/object-record/record-table/states/currentTableCellInEditModePositionComponentState';
+import { isSoftFocusOnTableCellComponentFamilyState } from '@/object-record/record-table/states/isSoftFocusOnTableCellComponentFamilyState';
 import { isSoftFocusUsingMouseState } from '@/object-record/record-table/states/isSoftFocusUsingMouseState';
 import { isTableCellInEditModeComponentFamilyState } from '@/object-record/record-table/states/isTableCellInEditModeComponentFamilyState';
 import { TableCellPosition } from '@/object-record/record-table/types/TableCellPosition';
@@ -11,8 +12,6 @@ import { extractComponentFamilyState } from '@/ui/utilities/state/component-stat
 import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
 
 export type HandleContainerMouseEnterArgs = {
-  isHovered: boolean;
-  setIsHovered: React.Dispatch<React.SetStateAction<boolean>>;
   cellPosition: TableCellPosition;
 };
 
@@ -28,16 +27,22 @@ export const useHandleContainerMouseEnter = ({
 
   const handleContainerMouseEnter = useRecoilCallback(
     ({ snapshot, set }) =>
-      ({
+      ({ cellPosition }: HandleContainerMouseEnterArgs) => {
-        isHovered,
-        setIsHovered,
-        cellPosition,
-      }: HandleContainerMouseEnterArgs) => {
         const currentTableCellInEditModePositionState = extractComponentState(
           currentTableCellInEditModePositionComponentState,
           tableScopeId,
         );
 
+        const isSoftFocusOnTableCellFamilyState = extractComponentFamilyState(
+          isSoftFocusOnTableCellComponentFamilyState,
+          tableScopeId,
+        );
+
+        const isSoftFocusOnTableCell = getSnapshotValue(
+          snapshot,
+          isSoftFocusOnTableCellFamilyState(cellPosition),
+        );
+
         const currentTableCellInEditModePosition = getSnapshotValue(
           snapshot,
           currentTableCellInEditModePositionState,
@@ -53,8 +58,7 @@ export const useHandleContainerMouseEnter = ({
           isTableCellInEditModeFamilyState(currentTableCellInEditModePosition),
         );
 
-        if (!isHovered && !isSomeCellInEditMode) {
+        if (!isSomeCellInEditMode && !isSoftFocusOnTableCell) {
-          setIsHovered(true);
           moveSoftFocusToCell(cellPosition);
           set(isSoftFocusUsingMouseState, true);
         }

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

@@ -5,6 +5,7 @@ import { FieldContext } from '@/object-record/record-field/contexts/FieldContext
 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 { RecordTableCellSoftFocusMode } from '@/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode';
 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';
@@ -14,7 +15,6 @@ import { TableHotkeyScope } from '../../types/TableHotkeyScope';
 
 import { RecordTableCellDisplayMode } from './RecordTableCellDisplayMode';
 import { RecordTableCellEditMode } from './RecordTableCellEditMode';
-import { RecordTableCellSoftFocusMode } from './RecordTableCellSoftFocusMode';
 
 import styles from './RecordTableCellContainer.module.css';
 
@@ -49,7 +49,6 @@ export const RecordTableCellContainer = ({
   const shouldBeInitiallyInEditMode =
     isPendingRow === true && isLabelIdentifier;
 
-  const [isHovered, setIsHovered] = useState(false);
   const [hasSoftFocus, setHasSoftFocus] = useState(false);
   const [isInEditMode, setIsInEditMode] = useState(shouldBeInitiallyInEditMode);
 
@@ -59,18 +58,25 @@ export const RecordTableCellContainer = ({
     onContextMenu(event, recordId);
   };
 
+  const handleContainerMouseMove = () => {
+    if (!hasSoftFocus) {
+      onCellMouseEnter({
+        cellPosition,
+      });
+    }
+  };
+
   const handleContainerMouseEnter = () => {
     if (!hasSoftFocus) {
       onCellMouseEnter({
         cellPosition,
-        isHovered,
-        setIsHovered,
       });
     }
   };
 
   const handleContainerMouseLeave = () => {
-    setIsHovered(false);
+    setHasSoftFocus(false);
+    setIsFocused(false);
   };
 
   const handleContainerClick = () => {
@@ -81,6 +87,8 @@ export const RecordTableCellContainer = ({
 
   useEffect(() => {
     const customEventListener = (event: any) => {
+      event.stopPropagation();
+
       const newHasSoftFocus = event.detail;
 
       setHasSoftFocus(newHasSoftFocus);
@@ -136,7 +144,7 @@ export const RecordTableCellContainer = ({
         <div
           onMouseEnter={handleContainerMouseEnter}
           onMouseLeave={handleContainerMouseLeave}
-          onMouseMove={handleContainerMouseEnter}
+          onMouseMove={handleContainerMouseMove}
           onClick={handleContainerClick}
           className={clsx({
             [styles.cellBaseContainer]: true,