From 8abec309e0eed5f1ee62787dd35a21e39049ef5c Mon Sep 17 00:00:00 2001 From: Guillim Date: Thu, 3 Apr 2025 09:57:02 +0200 Subject: [PATCH] Phone-onclickoutside (#11350) Fixes : For phones I have to press "enter" to validate my changes but for other fields it's saved automatically when I leave the cell Bug related to onClickOutside on the MultiItemFieldMenuItem component that shows phones (but also emails...) Seen with @bonapara : we keep a consitent behaviour meaning - saving input on click outside when primary item is being edited - not saving input on click outside when other items are being edited Fixes https://github.com/twentyhq/twenty/issues/11246 --- .../record-field/components/FieldInput.tsx | 5 +-- .../input/components/AddressFieldInput.tsx | 5 ++- .../input/components/ArrayFieldInput.tsx | 5 ++- .../input/components/BooleanFieldInput.tsx | 3 +- .../input/components/CurrencyFieldInput.tsx | 4 +-- .../input/components/DateFieldInput.tsx | 4 +-- .../input/components/DateTimeFieldInput.tsx | 9 ++---- .../input/components/EmailsFieldInput.tsx | 7 ++-- .../input/components/FullNameFieldInput.tsx | 2 +- .../input/components/LinksFieldInput.tsx | 5 ++- .../input/components/MultiItemBaseInput.tsx | 7 ++-- .../input/components/MultiItemFieldInput.tsx | 32 +++++++++---------- .../input/components/NumberFieldInput.tsx | 2 +- .../input/components/PhonesFieldInput.tsx | 3 +- .../input/components/RatingFieldInput.tsx | 3 +- .../input/components/RawJsonFieldInput.tsx | 5 ++- .../components/RelationToOneFieldInput.tsx | 2 +- .../input/components/RichTextFieldInput.tsx | 2 +- .../input/components/TextFieldInput.tsx | 6 ++-- .../record-field/types/FieldInputEvent.ts | 5 +++ .../components/RecordInlineCell.tsx | 7 ++-- .../components/RecordTableCellFieldInput.tsx | 6 ++-- .../components/RecordTitleCell.tsx | 6 ++-- .../RecordTitleCellTextFieldInput.tsx | 8 +++-- .../RecordTitleFullNameFieldInput.tsx | 8 ++--- 25 files changed, 82 insertions(+), 69 deletions(-) diff --git a/packages/twenty-front/src/modules/object-record/record-field/components/FieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/components/FieldInput.tsx index 54d2dca4a..0b1453f1e 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/components/FieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/components/FieldInput.tsx @@ -73,10 +73,7 @@ export const FieldInput = ({ ) : isFieldRelationFromManyObjects(fieldDefinition) ? ( ) : isFieldPhones(fieldDefinition) ? ( - onClickOutside?.(() => {}, event)} - /> + ) : isFieldText(fieldDefinition) ? ( { + onClickOutside?.(event); + persist(); + }} placeholder="Enter value" fieldMetadataType={FieldMetadataType.ARRAY} renderItem={({ value, index, handleEdit, handleDelete }) => ( diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/BooleanFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/BooleanFieldInput.tsx index b2b5cb97d..ddcc4d96d 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/BooleanFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/BooleanFieldInput.tsx @@ -1,10 +1,9 @@ import { BooleanInput } from '@/ui/field/input/components/BooleanInput'; +import { FieldInputEvent } from '@/object-record/record-field/types/FieldInputEvent'; import { usePersistField } from '../../../hooks/usePersistField'; import { useBooleanField } from '../../hooks/useBooleanField'; -import { FieldInputEvent } from './DateTimeFieldInput'; - export type BooleanFieldInputProps = { onSubmit?: FieldInputEvent; readonly?: boolean; diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/CurrencyFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/CurrencyFieldInput.tsx index 7184463a7..b881c17bc 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/CurrencyFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/CurrencyFieldInput.tsx @@ -6,11 +6,11 @@ import { CurrencyInput } from '@/ui/field/input/components/CurrencyInput'; import { useCurrencyField } from '../../hooks/useCurrencyField'; -import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull'; import { FieldInputClickOutsideEvent, FieldInputEvent, -} from './DateTimeFieldInput'; +} from '@/object-record/record-field/types/FieldInputEvent'; +import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull'; type CurrencyFieldInputProps = { onClickOutside?: FieldInputClickOutsideEvent; diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/DateFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/DateFieldInput.tsx index 1f498b385..2bf0033b8 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/DateFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/DateFieldInput.tsx @@ -3,9 +3,9 @@ import { Nullable } from 'twenty-ui'; import { useDateField } from '@/object-record/record-field/meta-types/hooks/useDateField'; import { DateInput } from '@/ui/field/input/components/DateInput'; -import { FieldInputClickOutsideEvent } from '@/object-record/record-field/meta-types/input/components/DateTimeFieldInput'; -import { usePersistField } from '../../../hooks/usePersistField'; +import { FieldInputClickOutsideEvent } from '@/object-record/record-field/types/FieldInputEvent'; import { isDefined } from 'twenty-shared/utils'; +import { usePersistField } from '../../../hooks/usePersistField'; type FieldInputEvent = (persist: () => void) => void; diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/DateTimeFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/DateTimeFieldInput.tsx index ef21ca4f0..e3007f221 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/DateTimeFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/DateTimeFieldInput.tsx @@ -2,15 +2,12 @@ import { Nullable } from 'twenty-ui'; import { DateInput } from '@/ui/field/input/components/DateInput'; +import { FieldInputEvent } from '@/object-record/record-field/meta-types/input/components/NumberFieldInput'; + +import { FieldInputClickOutsideEvent } from '@/object-record/record-field/types/FieldInputEvent'; import { usePersistField } from '../../../hooks/usePersistField'; import { useDateTimeField } from '../../hooks/useDateTimeField'; -export type FieldInputEvent = (persist: () => void) => void; -export type FieldInputClickOutsideEvent = ( - persist: () => void, - event: MouseEvent | TouchEvent, -) => void; - export type DateTimeFieldInputProps = { onClickOutside?: FieldInputClickOutsideEvent; onEnter?: FieldInputEvent; diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/EmailsFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/EmailsFieldInput.tsx index 50e0df661..dd40ed7e5 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/EmailsFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/EmailsFieldInput.tsx @@ -4,9 +4,9 @@ import { recordFieldInputIsFieldInErrorComponentState } from '@/object-record/re import { emailSchema } from '@/object-record/record-field/validation-schemas/emailSchema'; import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2'; import { useCallback, useMemo } from 'react'; +import { isDefined } from 'twenty-shared/utils'; import { FieldMetadataType } from '~/generated-metadata/graphql'; import { MultiItemFieldInput } from './MultiItemFieldInput'; -import { isDefined } from 'twenty-shared/utils'; type EmailsFieldInputProps = { onCancel?: () => void; @@ -59,7 +59,10 @@ export const EmailsFieldInput = ({ items={emails} onPersist={handlePersistEmails} onCancel={onCancel} - onClickOutside={onClickOutside} + onClickOutside={(persist, event) => { + onClickOutside?.(event); + persist(); + }} placeholder="Email" fieldMetadataType={FieldMetadataType.EMAILS} validateInput={validateInput} diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/FullNameFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/FullNameFieldInput.tsx index d304a19cb..a956760b8 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/FullNameFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/FullNameFieldInput.tsx @@ -8,7 +8,7 @@ import { isDoubleTextFieldEmpty } from '@/object-record/record-field/meta-types/ import { FieldInputClickOutsideEvent, FieldInputEvent, -} from './DateTimeFieldInput'; +} from '@/object-record/record-field/types/FieldInputEvent'; type FullNameFieldInputProps = { onClickOutside?: FieldInputClickOutsideEvent; diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/LinksFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/LinksFieldInput.tsx index 7cda497bb..a15af0f12 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/LinksFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/LinksFieldInput.tsx @@ -62,7 +62,10 @@ export const LinksFieldInput = ({ items={links} onPersist={handlePersistLinks} onCancel={onCancel} - onClickOutside={onClickOutside} + onClickOutside={(persist, event) => { + onClickOutside?.(event); + persist(); + }} placeholder="URL" fieldMetadataType={FieldMetadataType.LINKS} validateInput={(input) => ({ diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemBaseInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemBaseInput.tsx index b7e0554a3..c9004c169 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemBaseInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemBaseInput.tsx @@ -66,7 +66,7 @@ const StyledErrorDiv = styled.div` type HTMLInputProps = InputHTMLAttributes; -export type MultiItemBaseInputProps = HTMLInputProps & { +export type MultiItemBaseInputProps = Omit & { hotkeyScope?: string; onClickOutside?: () => void; onEnter?: () => void; @@ -76,13 +76,14 @@ export type MultiItemBaseInputProps = HTMLInputProps & { rightComponent?: ReactNode; renderInput?: (props: { value: HTMLInputProps['value']; - onChange: HTMLInputProps['onChange']; + onChange: (value: string) => void; autoFocus: HTMLInputProps['autoFocus']; placeholder: HTMLInputProps['placeholder']; }) => React.ReactNode; error?: string | null; hasError?: boolean; hasItem: boolean; + onChange: (value: string) => void; }; export const MultiItemBaseInput = forwardRef< @@ -140,7 +141,7 @@ export const MultiItemBaseInput = forwardRef< autoFocus={autoFocus} value={value} placeholder={placeholder} - onChange={onChange} + onChange={(event) => onChange(event.target.value)} ref={combinedRef} withRightComponent={!!rightComponent} hasItem={hasItem} diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx index 9ed480831..3534f6e82 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldInput.tsx @@ -6,6 +6,7 @@ import { MultiItemBaseInput, MultiItemBaseInputProps, } from '@/object-record/record-field/meta-types/input/components/MultiItemBaseInput'; +import { FieldInputClickOutsideEvent } from '@/object-record/record-field/types/FieldInputEvent'; import { PhoneRecord } from '@/object-record/record-field/types/FieldMetadata'; import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; @@ -35,7 +36,7 @@ type MultiItemFieldInputProps = { newItemLabel?: string; fieldMetadataType: FieldMetadataType; renderInput?: MultiItemBaseInputProps['renderInput']; - onClickOutside?: (event: MouseEvent | TouchEvent) => void; + onClickOutside?: FieldInputClickOutsideEvent; onError?: (hasError: boolean, values: any[]) => void; }; @@ -64,7 +65,13 @@ export const MultiItemFieldInput = ({ useListenClickOutside({ refs: [containerRef], callback: (event) => { - onClickOutside?.(event); + const isEditing = inputValue !== ''; + const isPrimaryItem = items.length === 0; + + if (isEditing && isPrimaryItem) { + handleSubmitInput(); + } + onClickOutside?.(() => {}, event); }, listenerId: hotkeyScope, }); @@ -195,22 +202,13 @@ export const MultiItemFieldInput = ({ value={inputValue} hotkeyScope={hotkeyScope} hasError={!errorData.isValid} - renderInput={ - renderInput - ? (props) => - renderInput({ - ...props, - onChange: (newValue) => - setInputValue(newValue as unknown as string), - }) - : undefined - } + renderInput={renderInput} onEscape={handleDropdownClose} - onChange={(event) => - handleOnChange( - turnIntoEmptyStringIfWhitespacesOnly(event.target.value), - ) - } + onChange={(value) => { + value + ? handleOnChange(turnIntoEmptyStringIfWhitespacesOnly(value)) + : handleOnChange(''); + }} onEnter={handleSubmitInput} hasItem={!!items.length} rightComponent={ diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/NumberFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/NumberFieldInput.tsx index 22245112a..f9bd63844 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/NumberFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/NumberFieldInput.tsx @@ -1,6 +1,6 @@ import { TextInput } from '@/ui/field/input/components/TextInput'; -import { FieldInputClickOutsideEvent } from '@/object-record/record-field/meta-types/input/components/DateTimeFieldInput'; +import { FieldInputClickOutsideEvent } from '@/object-record/record-field/types/FieldInputEvent'; import { FieldInputContainer } from '@/ui/field/input/components/FieldInputContainer'; import { useNumberField } from '../../hooks/useNumberField'; diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/PhonesFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/PhonesFieldInput.tsx index de10a6416..bce7a0364 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/PhonesFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/PhonesFieldInput.tsx @@ -9,6 +9,7 @@ import { TEXT_INPUT_STYLE } from 'twenty-ui'; import { MultiItemFieldInput } from './MultiItemFieldInput'; import { createPhonesFromFieldValue } from '@/object-record/record-field/meta-types/input/utils/phonesUtils'; +import { FieldInputClickOutsideEvent } from '@/object-record/record-field/types/FieldInputEvent'; import { PhoneCountryPickerDropdownButton } from '@/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton'; import { css } from '@emotion/react'; import { FieldMetadataType } from '~/generated-metadata/graphql'; @@ -61,7 +62,7 @@ const StyledCustomPhoneInput = styled(ReactPhoneNumberInput)` type PhonesFieldInputProps = { onCancel?: () => void; - onClickOutside?: (event: MouseEvent | TouchEvent) => void; + onClickOutside?: FieldInputClickOutsideEvent; }; export const PhonesFieldInput = ({ diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RatingFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RatingFieldInput.tsx index 873708669..6e8910819 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RatingFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RatingFieldInput.tsx @@ -1,11 +1,10 @@ import { FieldRatingValue } from '@/object-record/record-field/types/FieldMetadata'; import { RatingInput } from '@/ui/field/input/components/RatingInput'; +import { FieldInputEvent } from '@/object-record/record-field/types/FieldInputEvent'; import { usePersistField } from '../../../hooks/usePersistField'; import { useRatingField } from '../../hooks/useRatingField'; -import { FieldInputEvent } from './DateTimeFieldInput'; - export type RatingFieldInputProps = { onSubmit?: FieldInputEvent; readonly?: boolean; diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RawJsonFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RawJsonFieldInput.tsx index 891df20a2..57a138d06 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RawJsonFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RawJsonFieldInput.tsx @@ -1,11 +1,10 @@ import { TextAreaInput } from '@/ui/field/input/components/TextAreaInput'; -import { useJsonField } from '../../hooks/useJsonField'; - import { FieldInputClickOutsideEvent, FieldInputEvent, -} from './DateTimeFieldInput'; +} from '@/object-record/record-field/types/FieldInputEvent'; +import { useJsonField } from '../../hooks/useJsonField'; type RawJsonFieldInputProps = { onClickOutside?: FieldInputClickOutsideEvent; diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RelationToOneFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RelationToOneFieldInput.tsx index a1ea4eb43..0178a1f08 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RelationToOneFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RelationToOneFieldInput.tsx @@ -5,12 +5,12 @@ import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadata import { useAddNewRecordAndOpenRightDrawer } from '@/object-record/record-field/meta-types/input/hooks/useAddNewRecordAndOpenRightDrawer'; import { recordFieldInputLayoutDirectionComponentState } from '@/object-record/record-field/states/recordFieldInputLayoutDirectionComponentState'; import { recordFieldInputLayoutDirectionLoadingComponentState } from '@/object-record/record-field/states/recordFieldInputLayoutDirectionLoadingComponentState'; +import { FieldInputEvent } from '@/object-record/record-field/types/FieldInputEvent'; import { SingleRecordPicker } from '@/object-record/record-picker/single-record-picker/components/SingleRecordPicker'; import { SingleRecordPickerRecord } from '@/object-record/record-picker/single-record-picker/types/SingleRecordPickerRecord'; import { ObjectRecord } from '@/object-record/types/ObjectRecord'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { IconForbid } from 'twenty-ui'; -import { FieldInputEvent } from './DateTimeFieldInput'; export type RelationToOneFieldInputProps = { onSubmit?: FieldInputEvent; diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RichTextFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RichTextFieldInput.tsx index 718ae9e5a..5bc37525e 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RichTextFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RichTextFieldInput.tsx @@ -1,8 +1,8 @@ import { BLOCK_SCHEMA } from '@/activities/blocks/constants/Schema'; import { FieldContext } from '@/object-record/record-field/contexts/FieldContext'; import { useRichTextField } from '@/object-record/record-field/meta-types/hooks/useRichTextField'; -import { FieldInputClickOutsideEvent } from '@/object-record/record-field/meta-types/input/components/DateTimeFieldInput'; import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents'; +import { FieldInputClickOutsideEvent } from '@/object-record/record-field/types/FieldInputEvent'; import { BlockEditor } from '@/ui/input/editor/components/BlockEditor'; import { BlockEditorComponentInstanceContext } from '@/ui/input/editor/contexts/BlockEditorCompoponeInstanceContext'; import { PartialBlock } from '@blocknote/core'; diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/TextFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/TextFieldInput.tsx index a8668c896..411711f93 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/TextFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/TextFieldInput.tsx @@ -3,12 +3,12 @@ import { TextAreaInput } from '@/ui/field/input/components/TextAreaInput'; import { usePersistField } from '../../../hooks/usePersistField'; import { useTextField } from '../../hooks/useTextField'; -import { FieldInputContainer } from '@/ui/field/input/components/FieldInputContainer'; -import { turnIntoUndefinedIfWhitespacesOnly } from '~/utils/string/turnIntoUndefinedIfWhitespacesOnly'; import { FieldInputClickOutsideEvent, FieldInputEvent, -} from './DateTimeFieldInput'; +} from '@/object-record/record-field/types/FieldInputEvent'; +import { FieldInputContainer } from '@/ui/field/input/components/FieldInputContainer'; +import { turnIntoUndefinedIfWhitespacesOnly } from '~/utils/string/turnIntoUndefinedIfWhitespacesOnly'; export type TextFieldInputProps = { onClickOutside?: FieldInputClickOutsideEvent; diff --git a/packages/twenty-front/src/modules/object-record/record-field/types/FieldInputEvent.ts b/packages/twenty-front/src/modules/object-record/record-field/types/FieldInputEvent.ts index bf967a050..d8f033259 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/types/FieldInputEvent.ts +++ b/packages/twenty-front/src/modules/object-record/record-field/types/FieldInputEvent.ts @@ -1 +1,6 @@ export type FieldInputEvent = (persist: () => void) => void; + +export type FieldInputClickOutsideEvent = ( + persist: () => void, + event: MouseEvent | TouchEvent, +) => void; 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 fdeb54649..98894445a 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 @@ -6,12 +6,15 @@ import { FieldInput } from '@/object-record/record-field/components/FieldInput'; import { FieldContext } from '@/object-record/record-field/contexts/FieldContext'; import { FieldFocusContextProvider } from '@/object-record/record-field/contexts/FieldFocusContextProvider'; import { useGetButtonIcon } from '@/object-record/record-field/hooks/useGetButtonIcon'; -import { FieldInputEvent } from '@/object-record/record-field/types/FieldInputEvent'; +import { + FieldInputClickOutsideEvent, + FieldInputEvent, +} from '@/object-record/record-field/types/FieldInputEvent'; import { useIsFieldInputOnly } from '@/object-record/record-field/hooks/useIsFieldInputOnly'; import { useIsFieldValueReadOnly } from '@/object-record/record-field/hooks/useIsFieldValueReadOnly'; import { useOpenFieldInputEditMode } from '@/object-record/record-field/hooks/useOpenFieldInputEditMode'; -import { FieldInputClickOutsideEvent } from '@/object-record/record-field/meta-types/input/components/DateTimeFieldInput'; + import { FieldDefinition } from '@/object-record/record-field/types/FieldDefinition'; import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; import { isFieldRelation } from '@/object-record/record-field/types/guards/isFieldRelation'; 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 86a6c4455..1cd4b5664 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 @@ -1,7 +1,9 @@ import { FieldInput } from '@/object-record/record-field/components/FieldInput'; import { useIsFieldValueReadOnly } from '@/object-record/record-field/hooks/useIsFieldValueReadOnly'; -import { FieldInputClickOutsideEvent } from '@/object-record/record-field/meta-types/input/components/DateTimeFieldInput'; -import { FieldInputEvent } from '@/object-record/record-field/types/FieldInputEvent'; +import { + FieldInputClickOutsideEvent, + FieldInputEvent, +} from '@/object-record/record-field/types/FieldInputEvent'; import { useRecordTableBodyContextOrThrow } from '@/object-record/record-table/contexts/RecordTableBodyContext'; import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope'; import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState'; 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 814bad575..264ec6ad8 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 @@ -3,11 +3,13 @@ import { useContext } from 'react'; import { FieldContext } from '@/object-record/record-field/contexts/FieldContext'; import { FieldFocusContextProvider } from '@/object-record/record-field/contexts/FieldFocusContextProvider'; import { useIsFieldInputOnly } from '@/object-record/record-field/hooks/useIsFieldInputOnly'; -import { FieldInputEvent } from '@/object-record/record-field/types/FieldInputEvent'; +import { + FieldInputClickOutsideEvent, + FieldInputEvent, +} from '@/object-record/record-field/types/FieldInputEvent'; import { useInlineCell } from '../../record-inline-cell/hooks/useInlineCell'; -import { FieldInputClickOutsideEvent } from '@/object-record/record-field/meta-types/input/components/DateTimeFieldInput'; import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext'; import { RecordTitleCellContainer } from '@/object-record/record-title-cell/components/RecordTitleCellContainer'; import { 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 a47ca55e1..c3b789417 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 @@ -1,12 +1,14 @@ import { usePersistField } from '@/object-record/record-field/hooks/usePersistField'; import { useTextField } from '@/object-record/record-field/meta-types/hooks/useTextField'; -import { FieldInputClickOutsideEvent } from '@/object-record/record-field/meta-types/input/components/DateTimeFieldInput'; import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents'; -import { FieldInputEvent } from '@/object-record/record-field/types/FieldInputEvent'; +import { + FieldInputClickOutsideEvent, + FieldInputEvent, +} from '@/object-record/record-field/types/FieldInputEvent'; import { TextInputV2 } from '@/ui/input/components/TextInputV2'; import { useRef } from 'react'; -import { turnIntoUndefinedIfWhitespacesOnly } from '~/utils/string/turnIntoUndefinedIfWhitespacesOnly'; import { isDefined } from 'twenty-shared/utils'; +import { turnIntoUndefinedIfWhitespacesOnly } from '~/utils/string/turnIntoUndefinedIfWhitespacesOnly'; type RecordTitleCellTextFieldInputProps = { onClickOutside?: FieldInputClickOutsideEvent; diff --git a/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleFullNameFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleFullNameFieldInput.tsx index 2ba2e1f8c..ec8fba124 100644 --- a/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleFullNameFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleFullNameFieldInput.tsx @@ -1,12 +1,12 @@ import { useFullNameField } from '@/object-record/record-field/meta-types/hooks/useFullNameField'; -import { - FieldInputClickOutsideEvent, - FieldInputEvent, -} from '@/object-record/record-field/meta-types/input/components/DateTimeFieldInput'; import { FIRST_NAME_PLACEHOLDER_WITH_SPECIAL_CHARACTER_TO_AVOID_PASSWORD_MANAGERS } from '@/object-record/record-field/meta-types/input/constants/FirstNamePlaceholder'; import { LAST_NAME_PLACEHOLDER_WITH_SPECIAL_CHARACTER_TO_AVOID_PASSWORD_MANAGERS } from '@/object-record/record-field/meta-types/input/constants/LastNamePlaceholder'; import { isDoubleTextFieldEmpty } from '@/object-record/record-field/meta-types/input/utils/isDoubleTextFieldEmpty'; import { FieldDoubleText } from '@/object-record/record-field/types/FieldDoubleText'; +import { + FieldInputClickOutsideEvent, + FieldInputEvent, +} from '@/object-record/record-field/types/FieldInputEvent'; import { RecordTitleDoubleTextInput } from './RecordTitleDoubleTextInput'; type RecordTitleFullNameFieldInputProps = {