diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useHandleContainerMouseEnter.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useHandleContainerMouseEnter.ts index 2810c6f3b..16b5f9235 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useHandleContainerMouseEnter.ts +++ b/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>; cellPosition: TableCellPosition; }; @@ -28,16 +27,22 @@ export const useHandleContainerMouseEnter = ({ const handleContainerMouseEnter = useRecoilCallback( ({ snapshot, set }) => - ({ - isHovered, - setIsHovered, - cellPosition, - }: HandleContainerMouseEnterArgs) => { + ({ 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) { - setIsHovered(true); + if (!isSomeCellInEditMode && !isSoftFocusOnTableCell) { moveSoftFocusToCell(cellPosition); set(isSoftFocusUsingMouseState, true); } diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.tsx index 14bc8eecf..89a515a4d 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.tsx +++ b/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 = ({