diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents.ts b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents.ts index ebc47f132..2def31437 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents.ts +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents.ts @@ -1,12 +1,7 @@ import { Key } from 'ts-key-enum'; -import { FieldContext } from '@/object-record/record-field/contexts/FieldContext'; -import { getDropdownFocusIdForRecordField } from '@/object-record/utils/getDropdownFocusIdForRecordField'; -import { activeDropdownFocusIdState } from '@/ui/layout/dropdown/states/activeDropdownFocusIdState'; import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside'; -import { useContext } from 'react'; -import { useRecoilValue } from 'recoil'; import { isDefined } from 'twenty-shared'; export const useRegisterInputEvents = ({ @@ -30,32 +25,9 @@ export const useRegisterInputEvents = ({ onClickOutside?: (event: MouseEvent | TouchEvent, inputValue: T) => void; hotkeyScope: string; }) => { - const activeDropdownFocusId = useRecoilValue(activeDropdownFocusIdState); - - const { recordId, fieldDefinition } = useContext(FieldContext); - useListenClickOutside({ refs: [inputRef, copyRef].filter(isDefined), callback: (event) => { - const fieldDropdownFocusIdTableCell = getDropdownFocusIdForRecordField( - recordId, - fieldDefinition.fieldMetadataId, - 'table-cell', - ); - - const fieldDropdownFocusIdInlineCell = getDropdownFocusIdForRecordField( - recordId, - fieldDefinition.fieldMetadataId, - 'inline-cell', - ); - - if ( - activeDropdownFocusId !== fieldDropdownFocusIdTableCell && - activeDropdownFocusId !== fieldDropdownFocusIdInlineCell - ) { - return; - } - onClickOutside?.(event, inputValue); }, enabled: isDefined(onClickOutside), diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCell.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCell.tsx index 156040b61..9171b03bc 100644 --- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCell.tsx +++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCell.tsx @@ -21,10 +21,7 @@ import { isFieldSelect } from '@/object-record/record-field/types/guards/isField import { MultipleRecordPickerHotkeyScope } from '@/object-record/record-picker/multiple-record-picker/types/MultipleRecordPickerHotkeyScope'; import { SingleRecordPickerHotkeyScope } from '@/object-record/record-picker/single-record-picker/types/SingleRecordPickerHotkeyScope'; import { SelectFieldHotkeyScope } from '@/object-record/select/types/SelectFieldHotkeyScope'; -import { getDropdownFocusIdForRecordField } from '@/object-record/utils/getDropdownFocusIdForRecordField'; import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId'; -import { activeDropdownFocusIdState } from '@/ui/layout/dropdown/states/activeDropdownFocusIdState'; -import { useRecoilCallback } from 'recoil'; import { RelationDefinitionType } from '~/generated-metadata/graphql'; import { RecordInlineCellContainer } from './RecordInlineCellContainer'; import { @@ -83,30 +80,15 @@ export const RecordInlineCell = ({ loading }: RecordInlineCellProps) => { closeInlineCell(); }; - const handleClickOutside: FieldInputClickOutsideEvent = useRecoilCallback( - ({ snapshot }) => - (persistField, event) => { - const recordFieldDropdownId = getDropdownFocusIdForRecordField( - recordId, - fieldDefinition.fieldMetadataId, - 'inline-cell', - ); + const handleClickOutside: FieldInputClickOutsideEvent = ( + persistField, + event, + ) => { + event.stopImmediatePropagation(); - const activeDropdownFocusId = snapshot - .getLoadable(activeDropdownFocusIdState) - .getValue(); - - if (recordFieldDropdownId !== activeDropdownFocusId) { - return; - } - - event.stopImmediatePropagation(); - - persistField(); - closeInlineCell(); - }, - [closeInlineCell, fieldDefinition.fieldMetadataId, recordId], - ); + persistField(); + closeInlineCell(); + }; const { getIcon } = useIcons(); const { openFieldInput, closeFieldInput } = useOpenFieldInputEditMode(); 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 c482690b3..79be4f50c 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 @@ -5,10 +5,7 @@ import { FieldContext } from '@/object-record/record-field/contexts/FieldContext import { useIsFieldValueReadOnly } from '@/object-record/record-field/hooks/useIsFieldValueReadOnly'; import { FieldInputEvent } from '@/object-record/record-field/types/FieldInputEvent'; import { useRecordTableBodyContextOrThrow } from '@/object-record/record-table/contexts/RecordTableBodyContext'; -import { getDropdownFocusIdForRecordField } from '@/object-record/utils/getDropdownFocusIdForRecordField'; import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId'; -import { activeDropdownFocusIdState } from '@/ui/layout/dropdown/states/activeDropdownFocusIdState'; -import { useRecoilCallback } from 'recoil'; export const RecordTableCellFieldInput = () => { const { recordId, fieldDefinition } = useContext(FieldContext); @@ -43,35 +40,20 @@ export const RecordTableCellFieldInput = () => { onCloseTableCell(); }; - const handleClickOutside = useRecoilCallback( - ({ snapshot }) => - (persistField: () => void, event: MouseEvent | TouchEvent) => { - const dropdownFocusId = getDropdownFocusIdForRecordField( - recordId, - fieldDefinition.fieldMetadataId, - 'table-cell', - ); + const handleClickOutside = ( + persistField: () => void, + event: MouseEvent | TouchEvent, + ) => { + event.stopImmediatePropagation(); - const activeDropdownFocusId = snapshot - .getLoadable(activeDropdownFocusIdState) - .getValue(); + onUpsertRecord({ + persistField, + recordId, + fieldName: fieldDefinition.metadata.fieldName, + }); - if (activeDropdownFocusId !== dropdownFocusId) { - return; - } - - event.stopImmediatePropagation(); - - onUpsertRecord({ - persistField, - recordId, - fieldName: fieldDefinition.metadata.fieldName, - }); - - onCloseTableCell(); - }, - [fieldDefinition, onCloseTableCell, onUpsertRecord, recordId], - ); + onCloseTableCell(); + }; const handleEscape: FieldInputEvent = (persistField) => { onUpsertRecord({ diff --git a/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCell.tsx b/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCell.tsx index f889cb424..116c59a60 100644 --- a/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCell.tsx +++ b/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCell.tsx @@ -15,10 +15,7 @@ import { } from '@/object-record/record-title-cell/components/RecordTitleCellContext'; import { RecordTitleCellFieldDisplay } from '@/object-record/record-title-cell/components/RecordTitleCellFieldDisplay'; import { RecordTitleCellFieldInput } from '@/object-record/record-title-cell/components/RecordTitleCellFieldInput'; -import { getDropdownFocusIdForRecordField } from '@/object-record/utils/getDropdownFocusIdForRecordField'; import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId'; -import { activeDropdownFocusIdState } from '@/ui/layout/dropdown/states/activeDropdownFocusIdState'; -import { useRecoilCallback } from 'recoil'; type RecordTitleCellProps = { loading?: boolean; @@ -54,30 +51,15 @@ export const RecordTitleCell = ({ closeInlineCell(); }; - const handleClickOutside: FieldInputClickOutsideEvent = useRecoilCallback( - ({ snapshot }) => - (persistField, event) => { - const recordFieldDropdownId = getDropdownFocusIdForRecordField( - recordId, - fieldDefinition.fieldMetadataId, - 'inline-cell', - ); + const handleClickOutside: FieldInputClickOutsideEvent = ( + persistField, + event, + ) => { + event.stopImmediatePropagation(); - const activeDropdownFocusId = snapshot - .getLoadable(activeDropdownFocusIdState) - .getValue(); - - if (recordFieldDropdownId !== activeDropdownFocusId) { - return; - } - - event.stopImmediatePropagation(); - - persistField(); - closeInlineCell(); - }, - [closeInlineCell, fieldDefinition.fieldMetadataId, recordId], - ); + persistField(); + closeInlineCell(); + }; const recordTitleCellContextValue: RecordTitleCellContextProps = { editModeContent: ( diff --git a/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellTextFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellTextFieldInput.tsx index c944c4633..86e3854c1 100644 --- a/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellTextFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellTextFieldInput.tsx @@ -65,6 +65,7 @@ export const RecordTitleCellTextFieldInput = ({ return ( ({ !isMouseDownInside && !isClickedOnExcluded; - if (CLICK_OUTSIDE_DEBUG_MODE) { - const activeDropdownFocusId = snapshot - .getLoadable(activeDropdownFocusIdState) - .getValue(); - - const previousDropdownFocusId = snapshot - .getLoadable(previousDropdownFocusIdState) - .getValue(); - - // eslint-disable-next-line no-console - console.log('click outside compare refs', { - listenerId, - shouldTrigger, - isListening, - hasMouseDownHappened, - clickedOnAtLeastOneRef, - isMouseDownInside, - isClickedOnExcluded, - activeDropdownFocusId, - previousDropdownFocusId, - hotkeyScope, - enabled, - event, - }); - } - if (shouldTrigger) { callback(event); }