diff --git a/packages/twenty-chrome-extension/src/options/modules/ui/input/components/TextInput.tsx b/packages/twenty-chrome-extension/src/options/modules/ui/input/components/TextInput.tsx index cb90f5bcd..c6dc189a1 100644 --- a/packages/twenty-chrome-extension/src/options/modules/ui/input/components/TextInput.tsx +++ b/packages/twenty-chrome-extension/src/options/modules/ui/input/components/TextInput.tsx @@ -64,15 +64,15 @@ const TextInput: React.FC = ({ placeholder, icon, }) => { - const inputId = useId(); + const instanceId = useId(); return ( - {label && {label}} + {label && {label}} {icon && {icon}} onChange(e.target.value)} diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx index 19d2e151f..f21b96177 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx @@ -10,7 +10,7 @@ import { FieldContext } from '@/object-record/record-field/contexts/FieldContext import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext'; import { RecordInlineCell } from '@/object-record/record-inline-cell/components/RecordInlineCell'; import { PropertyBox } from '@/object-record/record-inline-cell/property-box/components/PropertyBox'; -import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId'; +import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId'; import { Chip, ChipAccent, ChipSize, ChipVariant } from 'twenty-ui/components'; import { IconCalendarEvent } from 'twenty-ui/display'; import { mapArrayToObject } from '~/utils/array/mapArrayToObject'; @@ -20,6 +20,8 @@ type CalendarEventDetailsProps = { calendarEvent: CalendarEvent; }; +const INPUT_ID_PREFIX = 'calendar-event-details'; + const StyledContainer = styled.div` background: ${({ theme }) => theme.background.secondary}; align-items: flex-start; @@ -111,10 +113,14 @@ export const CalendarEventDetails = ({ > - + diff --git a/packages/twenty-front/src/modules/activities/components/ActivityRichTextEditor.tsx b/packages/twenty-front/src/modules/activities/components/ActivityRichTextEditor.tsx index 9c4d7f3ab..03b656898 100644 --- a/packages/twenty-front/src/modules/activities/components/ActivityRichTextEditor.tsx +++ b/packages/twenty-front/src/modules/activities/components/ActivityRichTextEditor.tsx @@ -34,8 +34,7 @@ import { useRestoreManyRecords } from '@/object-record/hooks/useRestoreManyRecor import { useIsRecordReadOnly } from '@/object-record/record-field/hooks/useIsRecordReadOnly'; import { isInlineCellInEditModeScopedState } from '@/object-record/record-inline-cell/states/isInlineCellInEditModeScopedState'; import { useRecordShowContainerData } from '@/object-record/record-show/hooks/useRecordShowContainerData'; -import { RecordTitleCellContainerType } from '@/object-record/record-title-cell/types/RecordTitleCellContainerType'; -import { getRecordTitleCellId } from '@/object-record/record-title-cell/utils/getRecordTitleCellId'; +import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId'; import { BlockEditor } from '@/ui/input/editor/components/BlockEditor'; import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack'; import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks/useRemoveFocusItemFromFocusStackById'; @@ -364,11 +363,11 @@ export const ActivityRichTextEditor = ({ objectRecordId: activityId, }); - const recordTitleCellId = getRecordTitleCellId( - activityId, - labelIdentifierFieldMetadataItem?.id, - RecordTitleCellContainerType.ShowPage, - ); + const recordTitleCellId = getRecordFieldInputInstanceId({ + recordId: activityId, + fieldName: labelIdentifierFieldMetadataItem?.id, + prefix: 'activity-rich-text-editor', + }); const handleBlockEditorFocus = useRecoilCallback( ({ snapshot }) => diff --git a/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx b/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx index e9de906b3..5f126b43a 100644 --- a/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx +++ b/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx @@ -165,6 +165,7 @@ export const AttachmentRow = ({ {isEditing ? ( ( ( { return ( { return ( - + diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/constants/RecordBoardCardInputIdPrefix.ts b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/constants/RecordBoardCardInputIdPrefix.ts new file mode 100644 index 000000000..48313262b --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/constants/RecordBoardCardInputIdPrefix.ts @@ -0,0 +1 @@ +export const RECORD_BOARD_CARD_INPUT_ID_PREFIX = 'record-board-card'; diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormBooleanFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormBooleanFieldInput.tsx index ff4502bee..744049857 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormBooleanFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormBooleanFieldInput.tsx @@ -29,7 +29,7 @@ export const FormBooleanFieldInput = ({ readonly, VariablePicker, }: FormBooleanFieldInputProps) => { - const inputId = useId(); + const instanceId = useId(); const [draftValue, setDraftValue] = useState< | { @@ -105,7 +105,7 @@ export const FormBooleanFieldInput = ({ {VariablePicker && !readonly ? ( ) : null} diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormDateTimeFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormDateTimeFieldInput.tsx index 552272b24..454d3b6d7 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormDateTimeFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormDateTimeFieldInput.tsx @@ -89,7 +89,7 @@ export const FormDateTimeFieldInput = ({ isDateTimeInput: !dateOnly, }); - const inputId = useId(); + const instanceId = useId(); const [draftValue, setDraftValue] = useState( isStandaloneVariableString(defaultValue) @@ -340,7 +340,7 @@ export const FormDateTimeFieldInput = ({ {VariablePicker && !readonly ? ( ) : null} diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormMultiSelectFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormMultiSelectFieldInput.tsx index e1f5b2283..517a69c01 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormMultiSelectFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormMultiSelectFieldInput.tsx @@ -82,7 +82,7 @@ export const FormMultiSelectFieldInput = ({ placeholder, testId, }: FormMultiSelectFieldInputProps) => { - const inputId = useId(); + const instanceId = useId(); const theme = useTheme(); const hotkeyScope = @@ -268,7 +268,7 @@ export const FormMultiSelectFieldInput = ({ {VariablePicker && !readonly && ( )} diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormNumberFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormNumberFieldInput.tsx index e1d37c79d..26d9ad034 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormNumberFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormNumberFieldInput.tsx @@ -45,7 +45,7 @@ export const FormNumberFieldInput = ({ readonly, error: errorFromProps, }: FormNumberFieldInputProps) => { - const inputId = useId(); + const instanceId = useId(); const [errorMessage, setErrorMessage] = useState( undefined, ); @@ -117,7 +117,7 @@ export const FormNumberFieldInput = ({ return ( - {label ? {label} : null} + {label ? {label} : null} {draftValue.type === 'static' ? ( ) : null} diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormRawJsonFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormRawJsonFieldInput.tsx index 3f6bb3434..1f53da157 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormRawJsonFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormRawJsonFieldInput.tsx @@ -31,7 +31,7 @@ export const FormRawJsonFieldInput = ({ readonly, VariablePicker, }: FormRawJsonFieldInputProps) => { - const inputId = useId(); + const instanceId = useId(); const editor = useTextVariableEditor({ placeholder: placeholder ?? 'Enter a JSON object', @@ -80,7 +80,7 @@ export const FormRawJsonFieldInput = ({ {VariablePicker && !readonly && ( diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSelectFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSelectFieldInput.tsx index 4c972a3f3..d2a27d696 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSelectFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSelectFieldInput.tsx @@ -6,16 +6,16 @@ import { VariablePickerComponent } from '@/object-record/record-field/form-types import { InlineCellHotkeyScope } from '@/object-record/record-inline-cell/types/InlineCellHotkeyScope'; import { InputLabel } from '@/ui/input/components/InputLabel'; import { Select } from '@/ui/input/components/Select'; +import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth'; import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope'; import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; import { isStandaloneVariableString } from '@/workflow/utils/isStandaloneVariableString'; +import { useTheme } from '@emotion/react'; import { useId, useState } from 'react'; import { Key } from 'ts-key-enum'; import { isDefined } from 'twenty-shared/utils'; -import { SelectOption } from 'twenty-ui/input'; -import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth'; -import { useTheme } from '@emotion/react'; import { IconCircleOff } from 'twenty-ui/display'; +import { SelectOption } from 'twenty-ui/input'; type FormSelectFieldInputProps = { label?: string; @@ -36,7 +36,7 @@ export const FormSelectFieldInput = ({ }: FormSelectFieldInputProps) => { const theme = useTheme(); - const inputId = useId(); + const instanceId = useId(); const hotkeyScope = InlineCellHotkeyScope.InlineCell; @@ -135,7 +135,7 @@ export const FormSelectFieldInput = ({ {draftValue.type === 'static' ? (