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 18b245035..14bc8eecf 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 @@ -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, diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode.tsx index 567c70853..e7f3a0359 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellSoftFocusMode.tsx +++ b/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