diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableInternalEffect.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableInternalEffect.tsx index c44d3a947..19aa58b25 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableInternalEffect.tsx +++ b/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; }; export const RecordTableInternalEffect = ({ recordTableId, + tableBodyRef, }: RecordTableInternalEffectProps) => { - const { leaveTableFocus, resetTableRowSelection, useMapKeyboardToSoftFocus } = - useRecordTable({ recordTableId }); + const leaveTableFocus = useLeaveTableFocus(recordTableId); + + const { resetTableRowSelection, useMapKeyboardToSoftFocus } = useRecordTable({ + recordTableId, + }); useMapKeyboardToSoftFocus(); @@ -25,9 +32,9 @@ export const RecordTableInternalEffect = ({ TableHotkeyScope.Table, ); - useListenClickOutsideByClassName({ - classNames: ['entity-table-cell'], - excludeClassNames: ['bottom-bar', 'action-menu-dropdown', 'command-menu'], + useListenClickOutsideV2({ + listenerId: RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID, + refs: [tableBodyRef], callback: () => { leaveTableFocus(); }, diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx index 43bc9c76c..c91df83a3 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableWithWrappers.tsx @@ -87,7 +87,10 @@ export const RecordTableWithWrappers = ({ onDragSelectionChange={setRowSelected} /> - + diff --git a/packages/twenty-front/src/modules/object-record/record-table/constants/RecordTableClickOutsideListenerId.ts b/packages/twenty-front/src/modules/object-record/record-table/constants/RecordTableClickOutsideListenerId.ts new file mode 100644 index 000000000..1f17348a7 --- /dev/null +++ b/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'; diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useLeaveTableFocus.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useLeaveTableFocus.ts index fc3f38643..c202bd528 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useLeaveTableFocus.ts +++ b/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(); }, - [ - closeCurrentCellInEditMode, - disableSoftFocus, - isSoftFocusActiveState, - resetTableRowSelection, - ], + [disableSoftFocus, isSoftFocusActiveState, resetTableRowSelection], ); }; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFieldInput.tsx index 3d5eafb92..b92f3550c 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFieldInput.tsx +++ b/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, diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2.ts b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2.ts index f3d522e1f..debeb9a4f 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2.ts +++ b/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, - initDraftValue, - moveEditModeToTableCellPosition, - openRightDrawer, + navigate, + indexIdentifierUrl, setViewableRecordId, setViewableRecordNameSingular, - indexIdentifierUrl, - navigate, + openRightDrawer, + setHotkeyScope, ], );