From c6e5bab4e93180638e71ab6997e713193fae3574 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?=
 <71827178+bosiraphael@users.noreply.github.com>
Date: Mon, 7 Jul 2025 15:42:12 +0200
Subject: [PATCH] Replace hotkey scopes by focus stack (Part 4 - Inputs)
 (#12933)

# Replace hotkey scopes by focus stack (Part 4 - Inputs)

This PR is the 4th part of a refactoring aiming to deprecate the hotkey
scopes api in favor of the new focus stack api which is more robust.
Part 1: https://github.com/twentyhq/twenty/pull/12673
Part 2: https://github.com/twentyhq/twenty/pull/12798
Part 3: https://github.com/twentyhq/twenty/pull/12910

In this part, I refactored all inputs in the app so that each input has
a unique id which can be used to track the focused element.
---
 .../modules/ui/input/components/TextInput.tsx |   6 +-
 .../components/CalendarEventDetails.tsx       |  12 +-
 .../components/ActivityRichTextEditor.tsx     |  13 +-
 .../files/components/AttachmentRow.tsx        |   1 +
 .../internal/SignInUpEmailField.tsx           |   5 +-
 .../internal/SignInUpPasswordField.tsx        |   1 +
 .../ObjectFilterDropdownNumberInput.tsx       |   1 +
 .../ObjectFilterDropdownTextInput.tsx         |   1 +
 .../components/RecordBoardCardBody.tsx        |  15 +-
 .../constants/RecordBoardCardInputIdPrefix.ts |   1 +
 .../components/FormBooleanFieldInput.tsx      |   4 +-
 .../components/FormDateTimeFieldInput.tsx     |   4 +-
 .../components/FormMultiSelectFieldInput.tsx  |   4 +-
 .../components/FormNumberFieldInput.tsx       |   8 +-
 .../components/FormRawJsonFieldInput.tsx      |   4 +-
 .../components/FormSelectFieldInput.tsx       |  12 +-
 .../components/FormSingleRecordPicker.tsx     |   2 +-
 .../components/FormTextFieldInput.tsx         |   4 +-
 .../components/FormUuidFieldInput.tsx         |   8 +-
 .../types/VariablePickerComponent.ts          |   2 +-
 .../hooks/useOpenFieldInputEditMode.ts        |  24 +-
 .../input/components/AddressFieldInput.tsx    |   7 +
 .../input/components/CurrencyFieldInput.tsx   |   7 +
 .../input/components/DateFieldInput.tsx       |   7 +
 .../input/components/DateTimeFieldInput.tsx   |   7 +
 .../input/components/FullNameFieldInput.tsx   |   7 +
 .../input/components/MultiItemBaseInput.tsx   |   5 +-
 .../input/components/MultiItemFieldInput.tsx  |  17 +-
 .../components/MultiSelectFieldInput.tsx      |  15 +-
 .../input/components/NumberFieldInput.tsx     |   7 +
 .../input/components/RawJsonFieldInput.tsx    |  46 +--
 .../components/RelationFromManyFieldInput.tsx |  22 +-
 .../components/RelationToOneFieldInput.tsx    |  18 +-
 .../input/components/RichTextFieldInput.tsx   |   8 +-
 .../input/components/SelectFieldInput.tsx     |  30 +-
 .../input/components/TextFieldInput.tsx       |   7 +
 .../__stories__/AddressFieldInput.stories.tsx |  50 +++-
 .../__stories__/ArrayFieldInput.stories.tsx   |  33 ++-
 .../__stories__/BooleanFieldInput.stories.tsx |  13 +-
 .../DateTimeFieldInput.stories.tsx            |  34 ++-
 .../__stories__/EmailsFieldInput.stories.tsx  |  30 +-
 .../__stories__/LinksFieldInput.stories.tsx   |  35 ++-
 .../__stories__/NumberFieldInput.stories.tsx  |  37 ++-
 .../__stories__/PhonesFieldInput.stories.tsx  |  30 +-
 .../__stories__/RatingFieldInput.stories.tsx  |  33 ++-
 .../RelationFromManyFieldInput.stories.tsx    |  24 +-
 .../RelationToOneFieldInput.stories.tsx       |  22 +-
 .../RichTextFieldInput.stories.tsx            |  26 +-
 .../__stories__/TextFieldInput.stories.tsx    |  33 ++-
 .../useOpenRelationFromManyFieldInput.tsx     |   7 +-
 .../hooks/useOpenRelationToOneFieldInput.tsx  |  15 +-
 .../input/hooks/useRegisterInputEvents.ts     |  56 ++--
 .../utils/getFieldInputInstanceId.ts          |   9 -
 .../components/RecordInlineCell.tsx           |  28 +-
 .../components/RecordInlineCellContainer.tsx  |   8 +-
 .../components/MultipleRecordPicker.tsx       |   4 -
 .../record-show/components/FieldsCard.tsx     |  29 +-
 .../RecordDetailRelationRecordsListItem.tsx   |  14 +-
 .../constants/RecordTableCellInputIdPrefix.ts |   1 +
 .../hooks/useCreateNewIndexRecord.ts          |  20 +-
 .../RecordTableCellFieldContextWrapper.tsx    |  11 +-
 .../hooks/useOpenRecordTableCellV2.ts         |  12 +-
 .../components/RecordTitleCell.tsx            |  54 ++--
 .../RecordTitleCellFieldDisplay.tsx           |  11 +-
 .../components/RecordTitleCellFieldInput.tsx  |   3 +
 .../RecordTitleCellTextFieldDisplay.tsx       |  12 +-
 .../RecordTitleCellTextFieldInput.tsx         |   3 +
 .../components/RecordTitleDoubleTextInput.tsx |  72 +++--
 .../RecordTitleFullNameFieldDisplay.tsx       |  33 ++-
 .../hooks/useRecordTitleCell.tsx              |  66 +++--
 .../utils/getRecordTitleCellId.ts             |   9 -
 .../utils/getRecordFieldInputId.ts            |  15 +-
 .../SettingsAccountsBlocklistInput.tsx        |   1 +
 .../SetttingsAccountsImapConnectionForm.tsx   |   4 +
 .../components/SettingsAdminGeneral.tsx       |   1 +
 .../ConfigVariableDatabaseInput.tsx           |   3 +
 .../components/ConfigVariableSearchInput.tsx  |   1 +
 .../settings/components/SettingsCounter.tsx   |   5 +-
 .../SettingsDataModelFieldDescriptionForm.tsx |   3 +
 .../SettingsDataModelFieldIconLabelForm.tsx   |   7 +-
 .../SettingsObjectNewFieldSelector.tsx        |   1 +
 .../SettingsDataModelFieldDateForm.tsx        |   1 +
 .../SettingsDataModelFieldRelationForm.tsx    |   1 +
 ...tingsDataModelFieldSelectFormOptionRow.tsx |   2 +
 .../SettingsDataModelObjectAboutForm.tsx      |   8 +
 .../developers/components/ApiKeyInput.tsx     |   2 +-
 .../developers/components/ApiKeyNameInput.tsx |   3 +
 .../SettingsDevelopersWebhookForm.tsx         |   7 +
 ...tingsIntegrationDatabaseConnectionForm.tsx |   3 +-
 .../components/PlaygroundSetupForm.tsx        |   1 +
 .../profile/components/EmailField.tsx         |   1 +
 .../profile/components/NameFields.tsx         |   7 +-
 .../components/SettingsRoleAssignment.tsx     |   1 +
 ...RolePermissionsObjectLevelObjectPicker.tsx |   1 +
 .../components/SettingsRoleSettings.tsx       |   5 +
 .../components/SettingsRoleLabelContainer.tsx |   1 +
 .../SettingsSSOIdentitiesProvidersForm.tsx    |   5 +-
 .../components/SSO/SettingsSSOOIDCForm.tsx    |   5 +
 .../components/SSO/SettingsSSOSAMLForm.tsx    |   2 +
 .../SettingsServerlessFunctionNewForm.tsx     |   5 +
 ...FunctionTabEnvironmentVariablesSection.tsx |   7 +-
 .../workspace/components/NameField.tsx        |   1 +
 .../ValidationStep/components/columns.tsx     |   1 +
 .../field/input/components/AddressInput.tsx   | 124 ++++----
 .../field/input/components/CurrencyInput.tsx  |   3 +
 .../ui/field/input/components/DateInput.tsx   |   3 +
 .../input/components/DoubleTextInput.tsx      |  68 +++--
 .../field/input/components/TextAreaInput.tsx  |   5 +-
 .../ui/field/input/components/TextInput.tsx   |   7 +-
 .../__stories__/MultiSelectInput.stories.tsx  |   8 +-
 .../ui/input/components/AutosizeTextInput.tsx | 271 ------------------
 .../ui/input/components/IconPicker.tsx        |  66 +++--
 .../modules/ui/input/components/TextArea.tsx  |  35 ++-
 .../modules/ui/input/components/TextInput.tsx |  96 ++++---
 .../ui/input/components/TextInputV2.tsx       |  10 +-
 .../ui/input/components/TitleInput.tsx        |  28 +-
 .../__stories__/AutosizeTextInput.stories.tsx |  49 ----
 .../components/RelativeDatePickerHeader.tsx   |   1 +
 .../ui/input/types/IconPickerHotkeyScope.ts   |   3 -
 .../dropdown/components/DropdownMenuInput.tsx |   5 +-
 .../__stories__/Dropdown.stories.tsx          |   6 +-
 .../modal/components/ConfirmationModal.tsx    |   1 +
 .../components/SelectableListItem.tsx         |  12 +-
 .../focus/types/FocusComponentType.ts         |   3 +-
 .../hotkey/constants/DebugHotkeyScope.ts      |   2 +-
 .../components/WorkflowStepHeader.tsx         |   1 +
 .../WorkflowEditActionServerlessFunction.tsx  |   3 +
 .../components/WorkflowVariablePicker.tsx     |   4 +-
 .../components/WorkflowVariablesDropdown.tsx  |   6 +-
 .../components/WorkspaceInviteLink.tsx        |   7 +-
 .../components/WorkspaceInviteTeam.tsx        |   1 +
 .../settings/SettingsWorkspaceMembers.tsx     |   1 +
 .../data-model/SettingsObjectFieldTable.tsx   |   3 +-
 .../data-model/SettingsObjectIndexTable.tsx   |   3 +-
 .../settings/data-model/SettingsObjects.tsx   |   1 +
 .../SettingsDevelopersApiKeyDetail.tsx        |   1 +
 .../api-keys/SettingsDevelopersApiKeysNew.tsx |   1 +
 .../SettingsSecurityApprovedAccessDomain.tsx  |   2 +
 .../components/AdvancedSettingsToggle.tsx     |   6 +-
 .../menu-item/components/MenuItemToggle.tsx   |   6 +-
 140 files changed, 1178 insertions(+), 1004 deletions(-)
 create mode 100644 packages/twenty-front/src/modules/object-record/record-board/record-board-card/constants/RecordBoardCardInputIdPrefix.ts
 delete mode 100644 packages/twenty-front/src/modules/object-record/record-field/utils/getFieldInputInstanceId.ts
 create mode 100644 packages/twenty-front/src/modules/object-record/record-table/constants/RecordTableCellInputIdPrefix.ts
 delete mode 100644 packages/twenty-front/src/modules/object-record/record-title-cell/utils/getRecordTitleCellId.ts
 delete mode 100644 packages/twenty-front/src/modules/ui/input/components/AutosizeTextInput.tsx
 delete mode 100644 packages/twenty-front/src/modules/ui/input/components/__stories__/AutosizeTextInput.stories.tsx
 delete mode 100644 packages/twenty-front/src/modules/ui/input/types/IconPickerHotkeyScope.ts

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<TextInputProps> = ({
   placeholder,
   icon,
 }) => {
-  const inputId = useId();
+  const instanceId = useId();
 
   return (
     <StyledContainer fullWidth={fullWidth}>
-      {label && <StyledLabel htmlFor={inputId}>{label}</StyledLabel>}
+      {label && <StyledLabel htmlFor={instanceId}>{label}</StyledLabel>}
       <StyledInputContainer>
         {icon && <StyledIcon>{icon}</StyledIcon>}
         <StyledInput
-          id={inputId}
+          id={instanceId}
           type="text"
           value={value}
           onChange={(e) => 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 = ({
       >
         <RecordFieldComponentInstanceContext.Provider
           value={{
-            instanceId: getRecordFieldInputId(calendarEvent.id, fieldName),
+            instanceId: getRecordFieldInputInstanceId({
+              recordId: calendarEvent.id,
+              fieldName,
+              prefix: INPUT_ID_PREFIX,
+            }),
           }}
         >
-          <RecordInlineCell readonly />
+          <RecordInlineCell instanceIdPrefix={INPUT_ID_PREFIX} />
         </RecordFieldComponentInstanceContext.Provider>
       </FieldContext.Provider>
     </StyledPropertyBox>
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 = ({
           <AttachmentIcon attachmentType={attachment.type} />
           {isEditing ? (
             <TextInput
+              instanceId={`attachment-${attachment.id}-name`}
               value={attachmentFileName}
               onChange={handleOnChange}
               onBlur={handleOnBlur}
diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpEmailField.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpEmailField.tsx
index cf04dbe01..e6a2e3d33 100644
--- a/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpEmailField.tsx
+++ b/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpEmailField.tsx
@@ -1,8 +1,8 @@
+import { Form } from '@/auth/sign-in-up/hooks/useSignInUpForm';
 import { TextInput } from '@/ui/input/components/TextInput';
-import { Controller, useFormContext } from 'react-hook-form';
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
-import { Form } from '@/auth/sign-in-up/hooks/useSignInUpForm';
+import { Controller, useFormContext } from 'react-hook-form';
 import { isDefined } from 'twenty-shared/utils';
 
 const StyledFullWidthMotionDiv = styled(motion.div)`
@@ -41,6 +41,7 @@ export const SignInUpEmailField = ({
         }) => (
           <StyledInputContainer>
             <TextInput
+              instanceId="sign-in-up-email"
               autoFocus
               value={value}
               placeholder="Email"
diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpPasswordField.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpPasswordField.tsx
index 616f17800..68d8395fb 100644
--- a/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpPasswordField.tsx
+++ b/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpPasswordField.tsx
@@ -46,6 +46,7 @@ export const SignInUpPasswordField = ({
         }) => (
           <StyledInputContainer>
             <TextInput
+              instanceId="sign-in-up-password"
               autoFocus
               value={value}
               type="password"
diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownNumberInput.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownNumberInput.tsx
index a0a81b8b5..41c4cb8c8 100644
--- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownNumberInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownNumberInput.tsx
@@ -40,6 +40,7 @@ export const ObjectFilterDropdownNumberInput = () => {
   return (
     <DropdownMenuItemsContainer>
       <DropdownMenuInput
+        instanceId="object-filter-dropdown-number-input"
         ref={handleInputRef}
         value={objectFilterDropdownFilterValue}
         autoFocus
diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownTextInput.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownTextInput.tsx
index 4c39c6892..f53d4013e 100644
--- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownTextInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownTextInput.tsx
@@ -40,6 +40,7 @@ export const ObjectFilterDropdownTextInput = () => {
   return (
     <DropdownMenuItemsContainer>
       <DropdownMenuInput
+        instanceId="object-filter-dropdown-text-input"
         ref={handleInputRef}
         value={objectFilterDropdownFilterValue}
         autoFocus
diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardBody.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardBody.tsx
index 8c477eeeb..cd5a0c188 100644
--- a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardBody.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardBody.tsx
@@ -1,6 +1,7 @@
 import { RecordBoardContext } from '@/object-record/record-board/contexts/RecordBoardContext';
 import { RecordBoardCardBodyContainer } from '@/object-record/record-board/record-board-card/components/RecordBoardCardBodyContainer';
 import { StopPropagationContainer } from '@/object-record/record-board/record-board-card/components/StopPropagationContainer';
+import { RECORD_BOARD_CARD_INPUT_ID_PREFIX } from '@/object-record/record-board/record-board-card/constants/RecordBoardCardInputIdPrefix';
 import { RecordBoardCardContext } from '@/object-record/record-board/record-board-card/contexts/RecordBoardCardContext';
 import { RecordBoardFieldDefinition } from '@/object-record/record-board/types/RecordBoardFieldDefinition';
 import {
@@ -13,7 +14,7 @@ import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'
 import { getFieldButtonIcon } from '@/object-record/record-field/utils/getFieldButtonIcon';
 import { isFieldValueReadOnly } from '@/object-record/record-field/utils/isFieldValueReadOnly';
 import { RecordInlineCell } from '@/object-record/record-inline-cell/components/RecordInlineCell';
-import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId';
+import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId';
 import { useContext } from 'react';
 
 export const RecordBoardCardBody = ({
@@ -73,14 +74,16 @@ export const RecordBoardCardBody = ({
           >
             <RecordFieldComponentInstanceContext.Provider
               value={{
-                instanceId: getRecordFieldInputId(
+                instanceId: getRecordFieldInputInstanceId({
                   recordId,
-                  fieldDefinition.metadata.fieldName,
-                  'record-board-card',
-                ),
+                  fieldName: fieldDefinition.metadata.fieldName,
+                  prefix: RECORD_BOARD_CARD_INPUT_ID_PREFIX,
+                }),
               }}
             >
-              <RecordInlineCell />
+              <RecordInlineCell
+                instanceIdPrefix={RECORD_BOARD_CARD_INPUT_ID_PREFIX}
+              />
             </RecordFieldComponentInstanceContext.Provider>
           </FieldContext.Provider>
         </StopPropagationContainer>
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 ? (
           <VariablePicker
-            inputId={inputId}
+            instanceId={instanceId}
             onVariableSelect={handleVariableTagInsert}
           />
         ) : 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<DraftValue>(
     isStandaloneVariableString(defaultValue)
@@ -340,7 +340,7 @@ export const FormDateTimeFieldInput = ({
 
         {VariablePicker && !readonly ? (
           <VariablePicker
-            inputId={inputId}
+            instanceId={instanceId}
             onVariableSelect={handleVariableTagInsert}
           />
         ) : 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 && (
           <VariablePicker
-            inputId={inputId}
+            instanceId={instanceId}
             onVariableSelect={handleVariableTagInsert}
           />
         )}
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<string | undefined>(
     undefined,
   );
@@ -117,7 +117,7 @@ export const FormNumberFieldInput = ({
 
   return (
     <FormFieldInputContainer>
-      {label ? <InputLabel htmlFor={inputId}>{label}</InputLabel> : null}
+      {label ? <InputLabel htmlFor={instanceId}>{label}</InputLabel> : null}
 
       <FormFieldInputRowContainer>
         <FormFieldInputInnerContainer
@@ -126,7 +126,7 @@ export const FormNumberFieldInput = ({
         >
           {draftValue.type === 'static' ? (
             <StyledInput
-              inputId={inputId}
+              instanceId={instanceId}
               placeholder={
                 isDefined(placeholder) && !isEmpty(placeholder)
                   ? placeholder
@@ -148,7 +148,7 @@ export const FormNumberFieldInput = ({
 
         {VariablePicker && !readonly ? (
           <VariablePicker
-            inputId={inputId}
+            instanceId={instanceId}
             onVariableSelect={handleVariableTagInsert}
           />
         ) : 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 && (
           <VariablePicker
-            inputId={inputId}
+            instanceId={instanceId}
             multiline
             onVariableSelect={handleVariableTagInsert}
           />
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 = ({
       <FormFieldInputRowContainer>
         {draftValue.type === 'static' ? (
           <Select
-            dropdownId={`${inputId}-select-display`}
+            dropdownId={`${instanceId}-select-display`}
             options={options}
             value={selectedOption?.value}
             onChange={onSelect}
@@ -160,7 +160,7 @@ export const FormSelectFieldInput = ({
 
         {isDefined(VariablePicker) && !readonly && (
           <VariablePicker
-            inputId={inputId}
+            instanceId={instanceId}
             onVariableSelect={handleVariableTagInsert}
           />
         )}
diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSingleRecordPicker.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSingleRecordPicker.tsx
index da40ee332..913305a27 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSingleRecordPicker.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormSingleRecordPicker.tsx
@@ -204,7 +204,7 @@ export const FormSingleRecordPicker = ({
         )}
         {isDefined(VariablePicker) && !disabled && (
           <VariablePicker
-            inputId={variablesDropdownId}
+            instanceId={variablesDropdownId}
             disabled={disabled}
             onVariableSelect={handleVariableTagInsert}
             objectNameSingularToSelect={objectNameSingular}
diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormTextFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormTextFieldInput.tsx
index fbc77490b..0e595d907 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormTextFieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormTextFieldInput.tsx
@@ -36,7 +36,7 @@ export const FormTextFieldInput = ({
   readonly,
   VariablePicker,
 }: FormTextFieldInputProps) => {
-  const inputId = useId();
+  const instanceId = useId();
 
   const editor = useTextVariableEditor({
     placeholder: placeholder ?? 'Enter text',
@@ -84,7 +84,7 @@ export const FormTextFieldInput = ({
 
         {VariablePicker && !readonly ? (
           <VariablePicker
-            inputId={inputId}
+            instanceId={instanceId}
             multiline={multiline}
             onVariableSelect={handleVariableTagInsert}
           />
diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormUuidFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormUuidFieldInput.tsx
index 68e547142..f7d6021cc 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormUuidFieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/components/FormUuidFieldInput.tsx
@@ -31,7 +31,7 @@ export const FormUuidFieldInput = ({
   readonly,
   VariablePicker,
 }: FormUuidFieldInputProps) => {
-  const inputId = useId();
+  const instanceId = useId();
 
   const [draftValue, setDraftValue] = useState<
     | {
@@ -91,7 +91,7 @@ export const FormUuidFieldInput = ({
 
   return (
     <FormFieldInputContainer>
-      {label ? <InputLabel htmlFor={inputId}>{label}</InputLabel> : null}
+      {label ? <InputLabel htmlFor={instanceId}>{label}</InputLabel> : null}
 
       <FormFieldInputRowContainer>
         <FormFieldInputInnerContainer
@@ -99,7 +99,7 @@ export const FormUuidFieldInput = ({
         >
           {draftValue.type === 'static' ? (
             <StyledInput
-              inputId={inputId}
+              instanceId={instanceId}
               placeholder={placeholder ?? 'Enter a UUID'}
               value={draftValue.value}
               copyButton={false}
@@ -117,7 +117,7 @@ export const FormUuidFieldInput = ({
 
         {VariablePicker && !readonly ? (
           <VariablePicker
-            inputId={inputId}
+            instanceId={instanceId}
             onVariableSelect={handleVariableTagInsert}
           />
         ) : null}
diff --git a/packages/twenty-front/src/modules/object-record/record-field/form-types/types/VariablePickerComponent.ts b/packages/twenty-front/src/modules/object-record/record-field/form-types/types/VariablePickerComponent.ts
index ad2d9cad8..d4128d9b1 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/form-types/types/VariablePickerComponent.ts
+++ b/packages/twenty-front/src/modules/object-record/record-field/form-types/types/VariablePickerComponent.ts
@@ -1,5 +1,5 @@
 export type VariablePickerComponent = React.FC<{
-  inputId: string;
+  instanceId: string;
   disabled?: boolean;
   multiline?: boolean;
   onVariableSelect: (variableName: string) => void;
diff --git a/packages/twenty-front/src/modules/object-record/record-field/hooks/useOpenFieldInputEditMode.ts b/packages/twenty-front/src/modules/object-record/record-field/hooks/useOpenFieldInputEditMode.ts
index 422e66f63..3a24a310c 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/hooks/useOpenFieldInputEditMode.ts
+++ b/packages/twenty-front/src/modules/object-record/record-field/hooks/useOpenFieldInputEditMode.ts
@@ -15,11 +15,11 @@ import {
 } from '@/object-record/record-field/types/FieldMetadata';
 import { isFieldRelationFromManyObjects } from '@/object-record/record-field/types/guards/isFieldRelationFromManyObjects';
 import { isFieldRelationToOneObject } from '@/object-record/record-field/types/guards/isFieldRelationToOneObject';
-import { getFieldInputInstanceId } from '@/object-record/record-field/utils/getFieldInputInstanceId';
 import { INLINE_CELL_HOTKEY_SCOPE_MEMOIZE_KEY } from '@/object-record/record-inline-cell/constants/InlineCellHotkeyScopeMemoizeKey';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
 import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
 import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
+import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId';
 import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
 import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks/useRemoveFocusItemFromFocusStackById';
 import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
@@ -41,9 +41,11 @@ export const useOpenFieldInputEditMode = () => {
       ({
         fieldDefinition,
         recordId,
+        prefix,
       }: {
         fieldDefinition: FieldDefinition<FieldMetadata>;
         recordId: string;
+        prefix?: string;
       }) => {
         if (
           isFieldRelationFromManyObjects(fieldDefinition) &&
@@ -75,9 +77,10 @@ export const useOpenFieldInputEditMode = () => {
           });
 
           openActivityTargetCellEditMode({
-            recordPickerInstanceId: getFieldInputInstanceId({
+            recordPickerInstanceId: getRecordFieldInputInstanceId({
               recordId,
               fieldName: fieldDefinition.metadata.fieldName,
+              prefix,
             }),
             activityTargetObjectRecords,
           });
@@ -87,7 +90,8 @@ export const useOpenFieldInputEditMode = () => {
         if (isFieldRelationToOneObject(fieldDefinition)) {
           openRelationToOneFieldInput({
             fieldName: fieldDefinition.metadata.fieldName,
-            recordId: recordId,
+            recordId,
+            prefix,
           });
 
           return;
@@ -103,22 +107,25 @@ export const useOpenFieldInputEditMode = () => {
               fieldName: fieldDefinition.metadata.fieldName,
               objectNameSingular:
                 fieldDefinition.metadata.relationObjectMetadataNameSingular,
-              recordId: recordId,
+              recordId,
+              prefix,
             });
             return;
           }
         }
 
         pushFocusItemToFocusStack({
-          focusId: getFieldInputInstanceId({
+          focusId: getRecordFieldInputInstanceId({
             recordId,
             fieldName: fieldDefinition.metadata.fieldName,
+            prefix,
           }),
           component: {
             type: FocusComponentType.OPENED_FIELD_INPUT,
-            instanceId: getFieldInputInstanceId({
+            instanceId: getRecordFieldInputInstanceId({
               recordId,
               fieldName: fieldDefinition.metadata.fieldName,
+              prefix,
             }),
           },
           hotkeyScope: {
@@ -142,14 +149,17 @@ export const useOpenFieldInputEditMode = () => {
   const closeFieldInput = ({
     fieldDefinition,
     recordId,
+    prefix,
   }: {
     fieldDefinition: FieldDefinition<FieldMetadata>;
     recordId: string;
+    prefix?: string;
   }) => {
     removeFocusItemFromFocusStackById({
-      focusId: getFieldInputInstanceId({
+      focusId: getRecordFieldInputInstanceId({
         recordId,
         fieldName: fieldDefinition.metadata.fieldName,
+        prefix,
       }),
     });
   };
diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/AddressFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/AddressFieldInput.tsx
index 5c0412ecf..10fd74885 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/AddressFieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/AddressFieldInput.tsx
@@ -2,11 +2,13 @@ import { useAddressField } from '@/object-record/record-field/meta-types/hooks/u
 import { FieldAddressDraftValue } from '@/object-record/record-field/types/FieldInputDraftValue';
 import { AddressInput } from '@/ui/field/input/components/AddressInput';
 
+import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
 import {
   FieldInputClickOutsideEvent,
   FieldInputEvent,
 } from '@/object-record/record-field/types/FieldInputEvent';
 import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
+import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { usePersistField } from '../../../hooks/usePersistField';
 
 export type AddressFieldInputProps = {
@@ -70,8 +72,13 @@ export const AddressFieldInput = ({
     setDraftValue(convertToAddress(newAddress));
   };
 
+  const instanceId = useAvailableComponentInstanceIdOrThrow(
+    RecordFieldComponentInstanceContext,
+  );
+
   return (
     <AddressInput
+      instanceId={instanceId}
       value={convertToAddress(draftValue)}
       onClickOutside={handleClickOutside}
       onEnter={handleEnter}
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 f9aae591c..0d13bdaa8 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,13 @@ import { CurrencyInput } from '@/ui/field/input/components/CurrencyInput';
 
 import { useCurrencyField } from '../../hooks/useCurrencyField';
 
+import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
 import {
   FieldInputClickOutsideEvent,
   FieldInputEvent,
 } from '@/object-record/record-field/types/FieldInputEvent';
 import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
+import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
 
 type CurrencyFieldInputProps = {
@@ -31,6 +33,10 @@ export const CurrencyFieldInput = ({
   const { draftValue, persistCurrencyField, setDraftValue, defaultValue } =
     useCurrencyField();
 
+  const instanceId = useAvailableComponentInstanceIdOrThrow(
+    RecordFieldComponentInstanceContext,
+  );
+
   const defaultCurrencyCodeWithoutSQLQuotes = (
     defaultValue as FieldCurrencyValue
   ).currencyCode.replace(/'/g, '') as CurrencyCode;
@@ -114,6 +120,7 @@ export const CurrencyFieldInput = ({
 
   return (
     <CurrencyInput
+      instanceId={instanceId}
       value={draftValue?.amount?.toString() ?? ''}
       currencyCode={currencyCode}
       autoFocus
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 4443bef60..566f72816 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
@@ -1,8 +1,10 @@
 import { useDateField } from '@/object-record/record-field/meta-types/hooks/useDateField';
 import { DateInput } from '@/ui/field/input/components/DateInput';
 
+import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
 import { FieldInputClickOutsideEvent } from '@/object-record/record-field/types/FieldInputEvent';
 import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
+import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { isDefined } from 'twenty-shared/utils';
 import { Nullable } from 'twenty-ui/utilities';
 import { usePersistField } from '../../../hooks/usePersistField';
@@ -26,6 +28,10 @@ export const DateFieldInput = ({
 }: DateFieldInputProps) => {
   const { fieldValue, setDraftValue } = useDateField();
 
+  const instanceId = useAvailableComponentInstanceIdOrThrow(
+    RecordFieldComponentInstanceContext,
+  );
+
   const persistField = usePersistField();
 
   const persistDate = (newDate: Nullable<Date>) => {
@@ -73,6 +79,7 @@ export const DateFieldInput = ({
 
   return (
     <DateInput
+      instanceId={instanceId}
       onClickOutside={handleClickOutside}
       onEnter={handleEnter}
       onEscape={handleEscape}
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 40a23518d..e06720f35 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,8 +2,10 @@ import { DateInput } from '@/ui/field/input/components/DateInput';
 
 import { FieldInputEvent } from '@/object-record/record-field/meta-types/input/components/NumberFieldInput';
 
+import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
 import { FieldInputClickOutsideEvent } from '@/object-record/record-field/types/FieldInputEvent';
 import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
+import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { Nullable } from 'twenty-ui/utilities';
 import { usePersistField } from '../../../hooks/usePersistField';
 import { useDateTimeField } from '../../hooks/useDateTimeField';
@@ -25,6 +27,10 @@ export const DateTimeFieldInput = ({
 }: DateTimeFieldInputProps) => {
   const { fieldValue, setDraftValue } = useDateTimeField();
 
+  const instanceId = useAvailableComponentInstanceIdOrThrow(
+    RecordFieldComponentInstanceContext,
+  );
+
   const persistField = usePersistField();
 
   const persistDate = (newDate: Nullable<Date>) => {
@@ -68,6 +74,7 @@ export const DateTimeFieldInput = ({
 
   return (
     <DateInput
+      instanceId={instanceId}
       onClickOutside={handleClickOutside}
       onEnter={handleEnter}
       onEscape={handleEscape}
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 bca67a3fe..1658ddfbf 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
@@ -5,11 +5,13 @@ import { DoubleTextInput } from '@/ui/field/input/components/DoubleTextInput';
 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 { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
 import {
   FieldInputClickOutsideEvent,
   FieldInputEvent,
 } from '@/object-record/record-field/types/FieldInputEvent';
 import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
+import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 
 type FullNameFieldInputProps = {
   onClickOutside?: FieldInputClickOutsideEvent;
@@ -78,8 +80,13 @@ export const FullNameFieldInput = ({
     setDraftValue(getRequiredDraftValueFromDoubleText(newDoubleText));
   };
 
+  const instanceId = useAvailableComponentInstanceIdOrThrow(
+    RecordFieldComponentInstanceContext,
+  );
+
   return (
     <DoubleTextInput
+      instanceId={instanceId}
       firstValue={draftValue?.firstName ?? ''}
       secondValue={draftValue?.lastName ?? ''}
       firstValuePlaceholder={
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 993ccef2d..8cdcbd712 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
@@ -3,8 +3,8 @@ import styled from '@emotion/styled';
 import { forwardRef, InputHTMLAttributes, ReactNode, useRef } from 'react';
 
 import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
-import { useCombinedRefs } from '~/hooks/useCombinedRefs';
 import { TEXT_INPUT_STYLE } from 'twenty-ui/theme';
+import { useCombinedRefs } from '~/hooks/useCombinedRefs';
 
 const StyledInput = styled.input<{
   withRightComponent?: boolean;
@@ -84,6 +84,7 @@ export type MultiItemBaseInputProps = Omit<HTMLInputProps, 'onChange'> & {
   hasError?: boolean;
   hasItem: boolean;
   onChange: (value: string) => void;
+  instanceId: string;
 };
 
 export const MultiItemBaseInput = forwardRef<
@@ -108,6 +109,7 @@ export const MultiItemBaseInput = forwardRef<
       error = '',
       hasError = false,
       hasItem,
+      instanceId,
     },
     ref,
   ) => {
@@ -115,6 +117,7 @@ export const MultiItemBaseInput = forwardRef<
     const combinedRef = useCombinedRefs(ref, inputRef);
 
     useRegisterInputEvents({
+      focusId: instanceId,
       inputRef,
       inputValue: value,
       onEnter,
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 6683f9ed9..cac4f19ff 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,13 +6,15 @@ import {
   MultiItemBaseInput,
   MultiItemBaseInputProps,
 } from '@/object-record/record-field/meta-types/input/components/MultiItemBaseInput';
+import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
 import { FieldInputClickOutsideEvent } from '@/object-record/record-field/types/FieldInputEvent';
 import { PhoneRecord } from '@/object-record/record-field/types/FieldMetadata';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
-import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
+import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { IconCheck, IconPlus } from 'twenty-ui/display';
 import { LightIconButton } from 'twenty-ui/input';
 import { MenuItem } from 'twenty-ui/navigation';
@@ -79,7 +81,17 @@ export const MultiItemFieldInput = <T,>({
     listenerId: hotkeyScope,
   });
 
-  useScopedHotkeys(Key.Escape, handleDropdownClose, hotkeyScope);
+  const instanceId = useAvailableComponentInstanceIdOrThrow(
+    RecordFieldComponentInstanceContext,
+  );
+
+  useHotkeysOnFocusedElement({
+    focusId: instanceId,
+    keys: [Key.Escape],
+    callback: handleDropdownClose,
+    scope: hotkeyScope,
+    dependencies: [handleDropdownClose],
+  });
 
   const [isInputDisplayed, setIsInputDisplayed] = useState(false);
   const [inputValue, setInputValue] = useState('');
@@ -204,6 +216,7 @@ export const MultiItemFieldInput = <T,>({
       )}
       {isInputDisplayed || !items.length ? (
         <MultiItemBaseInput
+          instanceId={instanceId}
           autoFocus
           placeholder={placeholder}
           value={inputValue}
diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiSelectFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiSelectFieldInput.tsx
index a57257559..507bffe11 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiSelectFieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiSelectFieldInput.tsx
@@ -1,7 +1,8 @@
 import { useMultiSelectField } from '@/object-record/record-field/meta-types/hooks/useMultiSelectField';
 import { SELECT_FIELD_INPUT_SELECTABLE_LIST_COMPONENT_INSTANCE_ID } from '@/object-record/record-field/meta-types/input/constants/SelectFieldInputSelectableListComponentInstanceId';
-import { getFieldInputInstanceId } from '@/object-record/record-field/utils/getFieldInputInstanceId';
+import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
 import { MultiSelectInput } from '@/ui/field/input/components/MultiSelectInput';
+import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 
 type MultiSelectFieldInputProps = {
   onCancel?: () => void;
@@ -10,18 +11,18 @@ type MultiSelectFieldInputProps = {
 export const MultiSelectFieldInput = ({
   onCancel,
 }: MultiSelectFieldInputProps) => {
-  const { persistField, fieldDefinition, fieldValues, recordId } =
-    useMultiSelectField();
+  const { persistField, fieldDefinition, fieldValues } = useMultiSelectField();
+
+  const instanceId = useAvailableComponentInstanceIdOrThrow(
+    RecordFieldComponentInstanceContext,
+  );
 
   return (
     <MultiSelectInput
       selectableListComponentInstanceId={
         SELECT_FIELD_INPUT_SELECTABLE_LIST_COMPONENT_INSTANCE_ID
       }
-      focusId={getFieldInputInstanceId({
-        recordId,
-        fieldName: fieldDefinition.metadata.fieldName,
-      })}
+      focusId={instanceId}
       options={fieldDefinition.metadata.options}
       onCancel={onCancel}
       onOptionSelected={persistField}
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 49dacbb5f..11d5be096 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,8 +1,10 @@
 import { TextInput } from '@/ui/field/input/components/TextInput';
 
+import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
 import { FieldInputClickOutsideEvent } from '@/object-record/record-field/types/FieldInputEvent';
 import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
 import { FieldInputContainer } from '@/ui/field/input/components/FieldInputContainer';
+import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { useNumberField } from '../../hooks/useNumberField';
 
 export type FieldInputEvent = (persist: () => void) => void;
@@ -25,6 +27,10 @@ export const NumberFieldInput = ({
   const { fieldDefinition, draftValue, setDraftValue, persistNumberField } =
     useNumberField();
 
+  const instanceId = useAvailableComponentInstanceIdOrThrow(
+    RecordFieldComponentInstanceContext,
+  );
+
   const handleEnter = (newText: string) => {
     onEnter?.(() => persistNumberField(newText));
   };
@@ -55,6 +61,7 @@ export const NumberFieldInput = ({
   return (
     <FieldInputContainer>
       <TextInput
+        instanceId={instanceId}
         placeholder={fieldDefinition.metadata.placeHolder}
         autoFocus
         value={draftValue?.toString() ?? ''}
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 c8c8ed881..68fba461f 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,13 +1,15 @@
 import styled from '@emotion/styled';
 
 import { isWorkflowRunJsonField } from '@/object-record/record-field/meta-types/utils/isWorkflowRunJsonField';
+import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
 import {
   FieldInputClickOutsideEvent,
   FieldInputEvent,
 } from '@/object-record/record-field/types/FieldInputEvent';
 import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
-import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
+import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { useLingui } from '@lingui/react/macro';
 import { useRef, useState } from 'react';
 import { Key } from 'ts-key-enum';
@@ -70,6 +72,9 @@ export const RawJsonFieldInput = ({
   const hotkeyScope = DEFAULT_CELL_SCOPE.scope;
 
   const containerRef = useRef<HTMLDivElement>(null);
+  const instanceId = useAvailableComponentInstanceIdOrThrow(
+    RecordFieldComponentInstanceContext,
+  );
 
   const [isEditing, setIsEditing] = useState(false);
 
@@ -104,32 +109,35 @@ export const RawJsonFieldInput = ({
     listenerId: hotkeyScope,
   });
 
-  useScopedHotkeys(
-    [Key.Escape],
-    () => {
+  useHotkeysOnFocusedElement({
+    keys: [Key.Escape],
+    callback: () => {
       handleEscape(draftValue ?? '');
     },
-    hotkeyScope,
-    [handleEscape, draftValue],
-  );
+    scope: hotkeyScope,
+    focusId: instanceId,
+    dependencies: [handleEscape, draftValue],
+  });
 
-  useScopedHotkeys(
-    'tab',
-    () => {
+  useHotkeysOnFocusedElement({
+    keys: ['tab'],
+    callback: () => {
       handleTab(draftValue ?? '');
     },
-    hotkeyScope,
-    [handleTab, draftValue],
-  );
+    scope: hotkeyScope,
+    focusId: instanceId,
+    dependencies: [handleTab, draftValue],
+  });
 
-  useScopedHotkeys(
-    'shift+tab',
-    () => {
+  useHotkeysOnFocusedElement({
+    keys: ['shift+tab'],
+    callback: () => {
       handleShiftTab(draftValue ?? '');
     },
-    hotkeyScope,
-    [handleShiftTab, draftValue],
-  );
+    scope: hotkeyScope,
+    focusId: instanceId,
+    dependencies: [handleShiftTab, draftValue],
+  });
 
   const showEditingButton = !isWorkflowRunJsonField({
     objectMetadataNameSingular:
diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RelationFromManyFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RelationFromManyFieldInput.tsx
index af209a1c2..ba1becdd3 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RelationFromManyFieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RelationFromManyFieldInput.tsx
@@ -10,14 +10,15 @@ import { FieldContext } from '@/object-record/record-field/contexts/FieldContext
 import { useRelationField } from '@/object-record/record-field/meta-types/hooks/useRelationField';
 import { useAddNewRecordAndOpenRightDrawer } from '@/object-record/record-field/meta-types/input/hooks/useAddNewRecordAndOpenRightDrawer';
 import { useUpdateRelationFromManyFieldInput } from '@/object-record/record-field/meta-types/input/hooks/useUpdateRelationFromManyFieldInput';
+import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
 import { recordFieldInputLayoutDirectionComponentState } from '@/object-record/record-field/states/recordFieldInputLayoutDirectionComponentState';
 import { FieldDefinition } from '@/object-record/record-field/types/FieldDefinition';
 import { FieldInputEvent } from '@/object-record/record-field/types/FieldInputEvent';
 import { FieldRelationMetadata } from '@/object-record/record-field/types/FieldMetadata';
-import { getFieldInputInstanceId } from '@/object-record/record-field/utils/getFieldInputInstanceId';
 import { MultipleRecordPicker } from '@/object-record/record-picker/multiple-record-picker/components/MultipleRecordPicker';
 import { useMultipleRecordPickerPerformSearch } from '@/object-record/record-picker/multiple-record-picker/hooks/useMultipleRecordPickerPerformSearch';
 import { multipleRecordPickerPickableMorphItemsComponentState } from '@/object-record/record-picker/multiple-record-picker/states/multipleRecordPickerPickableMorphItemsComponentState';
+import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useRecoilCallback } from 'recoil';
@@ -31,10 +32,9 @@ export const RelationFromManyFieldInput = ({
   onSubmit,
 }: RelationFromManyFieldInputProps) => {
   const { fieldDefinition, recordId } = useContext(FieldContext);
-  const recordPickerInstanceId = getFieldInputInstanceId({
-    recordId,
-    fieldName: fieldDefinition.metadata.fieldName,
-  });
+  const instanceId = useAvailableComponentInstanceIdOrThrow(
+    RecordFieldComponentInstanceContext,
+  );
 
   const { updateRelation } = useUpdateRelationFromManyFieldInput();
   const fieldName = fieldDefinition.metadata.fieldName;
@@ -94,7 +94,7 @@ export const RelationFromManyFieldInput = ({
   const multipleRecordPickerPickableMorphItemsCallbackState =
     useRecoilComponentCallbackStateV2(
       multipleRecordPickerPickableMorphItemsComponentState,
-      recordPickerInstanceId,
+      instanceId,
     );
   const { performSearch: multipleRecordPickerPerformSearch } =
     useMultipleRecordPickerPerformSearch();
@@ -123,7 +123,7 @@ export const RelationFromManyFieldInput = ({
         set(multipleRecordPickerPickableMorphItemsCallbackState, newMorphItems);
 
         multipleRecordPickerPerformSearch({
-          multipleRecordPickerInstanceId: recordPickerInstanceId,
+          multipleRecordPickerInstanceId: instanceId,
           forceSearchFilter: searchInput,
           forceSearchableObjectMetadataItems: [relationObjectMetadataItem],
           forcePickableMorphItems: newMorphItems,
@@ -132,7 +132,7 @@ export const RelationFromManyFieldInput = ({
     [
       createNewRecordAndOpenRightDrawer,
       relationObjectMetadataItem,
-      recordPickerInstanceId,
+      instanceId,
       multipleRecordPickerPickableMorphItemsCallbackState,
       multipleRecordPickerPerformSearch,
     ],
@@ -142,15 +142,15 @@ export const RelationFromManyFieldInput = ({
 
   return (
     <MultipleRecordPicker
-      focusId={recordPickerInstanceId}
-      componentInstanceId={recordPickerInstanceId}
+      focusId={instanceId}
+      componentInstanceId={instanceId}
       onSubmit={handleSubmit}
       onChange={(morphItem) => {
         if (isRelationFromActivityTargets) {
           updateActivityTargetFromCell({
             morphItem,
             activityTargetWithTargetRecords: activityTargetObjectRecords,
-            recordPickerInstanceId,
+            recordPickerInstanceId: instanceId,
           });
         } else {
           updateRelation(morphItem);
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 f32632f87..54a3c6700 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
@@ -3,14 +3,15 @@ import { useRelationField } from '../../hooks/useRelationField';
 
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { useAddNewRecordAndOpenRightDrawer } from '@/object-record/record-field/meta-types/input/hooks/useAddNewRecordAndOpenRightDrawer';
+import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
 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 { getFieldInputInstanceId } from '@/object-record/record-field/utils/getFieldInputInstanceId';
 import { SingleRecordPicker } from '@/object-record/record-picker/single-record-picker/components/SingleRecordPicker';
 import { singleRecordPickerSelectedIdComponentState } from '@/object-record/record-picker/single-record-picker/states/singleRecordPickerSelectedIdComponentState';
 import { SingleRecordPickerRecord } from '@/object-record/record-picker/single-record-picker/types/SingleRecordPickerRecord';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
+import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { isDefined } from 'twenty-shared/utils';
@@ -29,10 +30,9 @@ export const RelationToOneFieldInput = ({
 
   const persistField = usePersistField();
 
-  const recordPickerInstanceId = getFieldInputInstanceId({
-    recordId,
-    fieldName: fieldDefinition.metadata.fieldName,
-  });
+  const instanceId = useAvailableComponentInstanceIdOrThrow(
+    RecordFieldComponentInstanceContext,
+  );
 
   const handleRecordSelected = (
     selectedRecord: SingleRecordPickerRecord | null | undefined,
@@ -67,7 +67,7 @@ export const RelationToOneFieldInput = ({
 
   const setSingleRecordPickerSelectedId = useSetRecoilComponentStateV2(
     singleRecordPickerSelectedIdComponentState,
-    recordPickerInstanceId,
+    instanceId,
   );
 
   const handleCreateNew = async (searchInput?: string) => {
@@ -84,8 +84,8 @@ export const RelationToOneFieldInput = ({
 
   return (
     <SingleRecordPicker
-      focusId={recordPickerInstanceId}
-      componentInstanceId={recordPickerInstanceId}
+      focusId={instanceId}
+      componentInstanceId={instanceId}
       EmptyIcon={IconForbid}
       emptyLabel={'No ' + fieldDefinition.label}
       onCancel={onCancel}
@@ -94,7 +94,7 @@ export const RelationToOneFieldInput = ({
       objectNameSingular={
         fieldDefinition.metadata.relationObjectMetadataNameSingular
       }
-      recordPickerInstanceId={recordPickerInstanceId}
+      recordPickerInstanceId={instanceId}
       layoutDirection={
         layoutDirection === 'downward'
           ? 'search-bar-on-top'
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 6b39d48d6..b931841f7 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
@@ -3,14 +3,16 @@ import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableE
 import { useRichTextCommandMenu } from '@/command-menu/hooks/useRichTextCommandMenu';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
+import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
 import {
   FieldInputClickOutsideEvent,
   FieldInputEvent,
 } from '@/object-record/record-field/types/FieldInputEvent';
 import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
+import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { lazy, Suspense, useRef } from 'react';
+import { Suspense, lazy, useRef } from 'react';
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
 import { IconLayoutSidebarLeftCollapse } from 'twenty-ui/display';
 import { FloatingIconButton } from 'twenty-ui/input';
@@ -72,6 +74,9 @@ export const RichTextFieldInput = ({
 } & RichTextFieldInputProps) => {
   const { editRichText } = useRichTextCommandMenu();
   const containerRef = useRef<HTMLDivElement>(null);
+  const instanceId = useAvailableComponentInstanceIdOrThrow(
+    RecordFieldComponentInstanceContext,
+  );
 
   const handleClickOutside = (event: MouseEvent | TouchEvent) => {
     onClickOutside?.(() => {}, event);
@@ -82,6 +87,7 @@ export const RichTextFieldInput = ({
   };
 
   useRegisterInputEvents({
+    focusId: instanceId,
     inputRef: containerRef,
     inputValue: null,
     onClickOutside: handleClickOutside,
diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/SelectFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/SelectFieldInput.tsx
index ce6454c76..d182ca46c 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/SelectFieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/SelectFieldInput.tsx
@@ -1,12 +1,13 @@
 import { useClearField } from '@/object-record/record-field/hooks/useClearField';
 import { useSelectField } from '@/object-record/record-field/meta-types/hooks/useSelectField';
 import { SELECT_FIELD_INPUT_SELECTABLE_LIST_COMPONENT_INSTANCE_ID } from '@/object-record/record-field/meta-types/input/constants/SelectFieldInputSelectableListComponentInstanceId';
+import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
 import { FieldInputEvent } from '@/object-record/record-field/types/FieldInputEvent';
-import { getFieldInputInstanceId } from '@/object-record/record-field/utils/getFieldInputInstanceId';
 import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
 import { SelectInput } from '@/ui/field/input/components/SelectInput';
 import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
-import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
+import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { useState } from 'react';
 import { Key } from 'ts-key-enum';
 import { isDefined } from 'twenty-shared/utils';
@@ -21,8 +22,11 @@ export const SelectFieldInput = ({
   onSubmit,
   onCancel,
 }: SelectFieldInputProps) => {
-  const { persistField, fieldDefinition, fieldValue, recordId } =
-    useSelectField();
+  const { persistField, fieldDefinition, fieldValue } = useSelectField();
+
+  const instanceId = useAvailableComponentInstanceIdOrThrow(
+    RecordFieldComponentInstanceContext,
+  );
 
   const [filteredOptions, setFilteredOptions] = useState<SelectOption[]>([]);
 
@@ -46,15 +50,16 @@ export const SelectFieldInput = ({
     resetSelectedItem();
   };
 
-  useScopedHotkeys(
-    Key.Escape,
-    () => {
+  useHotkeysOnFocusedElement({
+    keys: [Key.Escape],
+    callback: () => {
       onCancel?.();
       resetSelectedItem();
     },
-    DEFAULT_CELL_SCOPE.scope,
-    [onCancel, resetSelectedItem],
-  );
+    scope: DEFAULT_CELL_SCOPE.scope,
+    focusId: instanceId,
+    dependencies: [onCancel, resetSelectedItem],
+  });
 
   const optionIds = [
     `No ${fieldDefinition.label}`,
@@ -67,10 +72,7 @@ export const SelectFieldInput = ({
         SELECT_FIELD_INPUT_SELECTABLE_LIST_COMPONENT_INSTANCE_ID
       }
       selectableItemIdArray={optionIds}
-      focusId={getFieldInputInstanceId({
-        recordId,
-        fieldName: fieldDefinition.metadata.fieldName,
-      })}
+      focusId={instanceId}
       onEnter={(itemId) => {
         const option = filteredOptions.find(
           (option) => option.value === itemId,
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 6542cd578..9b8542a1e 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,14 @@ import { TextAreaInput } from '@/ui/field/input/components/TextAreaInput';
 import { usePersistField } from '../../../hooks/usePersistField';
 import { useTextField } from '../../hooks/useTextField';
 
+import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
 import {
   FieldInputClickOutsideEvent,
   FieldInputEvent,
 } from '@/object-record/record-field/types/FieldInputEvent';
 import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
 import { FieldInputContainer } from '@/ui/field/input/components/FieldInputContainer';
+import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { turnIntoUndefinedIfWhitespacesOnly } from '~/utils/string/turnIntoUndefinedIfWhitespacesOnly';
 
 export type TextFieldInputProps = {
@@ -28,6 +30,10 @@ export const TextFieldInput = ({
 }: TextFieldInputProps) => {
   const { fieldDefinition, draftValue, setDraftValue } = useTextField();
 
+  const instanceId = useAvailableComponentInstanceIdOrThrow(
+    RecordFieldComponentInstanceContext,
+  );
+
   const persistField = usePersistField();
   const handleEnter = (newText: string) => {
     onEnter?.(() => persistField(newText.trim()));
@@ -59,6 +65,7 @@ export const TextFieldInput = ({
   return (
     <FieldInputContainer>
       <TextAreaInput
+        instanceId={instanceId}
         placeholder={fieldDefinition.metadata.placeHolder}
         autoFocus
         value={draftValue ?? ''}
diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/AddressFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/AddressFieldInput.stories.tsx
index 2e6c8cacc..62f86700a 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/AddressFieldInput.stories.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/AddressFieldInput.stories.tsx
@@ -1,18 +1,20 @@
 import { Decorator, Meta, StoryObj } from '@storybook/react';
 import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
-import { useEffect } from 'react';
 
 import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 import { useAddressField } from '@/object-record/record-field/meta-types/hooks/useAddressField';
 import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
 import { FieldAddressDraftValue } from '@/object-record/record-field/types/FieldInputDraftValue';
+import { RECORD_TABLE_CELL_INPUT_ID_PREFIX } from '@/object-record/record-table/constants/RecordTableCellInputIdPrefix';
 import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
-import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId';
+import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId';
 import {
   AddressInput,
   AddressInputProps,
 } from '@/ui/field/input/components/AddressInput';
-import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
+import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
+import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
+import { useEffect } from 'react';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 
 const AddressValueSetterEffect = ({
@@ -43,21 +45,30 @@ const AddressInputWithContext = ({
   onTab,
   onShiftTab,
 }: AddressInputWithContextProps) => {
-  const setHotKeyScope = useSetHotkeyScope();
+  const { pushFocusItemToFocusStack } = usePushFocusItemToFocusStack();
+
+  const instanceId = getRecordFieldInputInstanceId({
+    recordId: recordId ?? '',
+    fieldName: 'Address',
+    prefix: RECORD_TABLE_CELL_INPUT_ID_PREFIX,
+  });
 
   useEffect(() => {
-    setHotKeyScope(DEFAULT_CELL_SCOPE.scope);
-  }, [setHotKeyScope]);
+    pushFocusItemToFocusStack({
+      focusId: instanceId,
+      component: {
+        type: FocusComponentType.OPENED_FIELD_INPUT,
+        instanceId: instanceId,
+      },
+      hotkeyScope: DEFAULT_CELL_SCOPE,
+    });
+  }, [instanceId, pushFocusItemToFocusStack]);
 
   return (
     <div>
       <RecordFieldComponentInstanceContext.Provider
         value={{
-          instanceId: getRecordFieldInputId(
-            recordId ?? '',
-            'Address',
-            'record-table-cell',
-          ),
+          instanceId: instanceId,
         }}
       >
         <FieldContext.Provider
@@ -80,6 +91,7 @@ const AddressInputWithContext = ({
         >
           <AddressValueSetterEffect value={value} />
           <AddressInput
+            instanceId={instanceId}
             onEnter={onEnter}
             onEscape={onEscape}
             onClickOutside={onClickOutside}
@@ -116,7 +128,16 @@ const meta: Meta = {
   title: 'UI/Data/Field/Input/AddressFieldInput',
   component: AddressInputWithContext,
   args: {
-    value: 'text',
+    value: {
+      addressStreet1: 'Address 1',
+      addressStreet2: null,
+      addressCity: null,
+      addressState: null,
+      addressPostcode: null,
+      addressCountry: null,
+      addressLat: null,
+      addressLng: null,
+    },
     onEnter: enterJestFn,
     onEscape: escapeJestfn,
     onClickOutside: clickOutsideJestFn,
@@ -148,7 +169,10 @@ export const Enter: Story = {
 
     expect(enterJestFn).toHaveBeenCalledTimes(0);
 
-    await canvas.findByText('Address 1');
+    const addressInput = await canvas.findByDisplayValue('Address 1');
+
+    await userEvent.click(addressInput);
+
     await userEvent.keyboard('{enter}');
 
     await waitFor(() => {
diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/ArrayFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/ArrayFieldInput.stories.tsx
index 6e75dcafb..100b123ac 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/ArrayFieldInput.stories.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/ArrayFieldInput.stories.tsx
@@ -6,9 +6,11 @@ import { useEffect } from 'react';
 import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 import { useArrayField } from '@/object-record/record-field/meta-types/hooks/useArrayField';
 import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
+import { RECORD_TABLE_CELL_INPUT_ID_PREFIX } from '@/object-record/record-table/constants/RecordTableCellInputIdPrefix';
 import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
-import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId';
-import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
+import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId';
+import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
+import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 import { ArrayFieldInput } from '../ArrayFieldInput';
 
@@ -55,20 +57,33 @@ const ArrayInputWithContext = ({
   onCancel,
   onClickOutside,
 }: ArrayInputWithContextProps) => {
-  const setHotkeyScope = useSetHotkeyScope();
+  const { pushFocusItemToFocusStack } = usePushFocusItemToFocusStack();
+
+  const instanceId = getRecordFieldInputInstanceId({
+    recordId,
+    fieldName: 'tags',
+    prefix: RECORD_TABLE_CELL_INPUT_ID_PREFIX,
+  });
 
   useEffect(() => {
-    setHotkeyScope(DEFAULT_CELL_SCOPE.scope);
-  }, [setHotkeyScope]);
+    pushFocusItemToFocusStack({
+      focusId: instanceId,
+      component: {
+        type: FocusComponentType.OPENED_FIELD_INPUT,
+        instanceId: instanceId,
+      },
+      hotkeyScope: DEFAULT_CELL_SCOPE,
+    });
+  }, [pushFocusItemToFocusStack, instanceId]);
 
   return (
     <RecordFieldComponentInstanceContext.Provider
       value={{
-        instanceId: getRecordFieldInputId(
+        instanceId: getRecordFieldInputInstanceId({
           recordId,
-          'tags',
-          'record-table-cell',
-        ),
+          fieldName: 'tags',
+          prefix: RECORD_TABLE_CELL_INPUT_ID_PREFIX,
+        }),
       }}
     >
       <FieldContext.Provider
diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/BooleanFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/BooleanFieldInput.stories.tsx
index 950ba0355..447e0394a 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/BooleanFieldInput.stories.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/BooleanFieldInput.stories.tsx
@@ -8,7 +8,8 @@ import { FieldMetadataType } from '~/generated-metadata/graphql';
 
 import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
-import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId';
+import { RECORD_TABLE_CELL_INPUT_ID_PREFIX } from '@/object-record/record-table/constants/RecordTableCellInputIdPrefix';
+import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId';
 import {
   BooleanFieldInput,
   BooleanFieldInputProps,
@@ -43,11 +44,11 @@ const BooleanFieldInputWithContext = ({
   return (
     <RecordFieldComponentInstanceContext.Provider
       value={{
-        instanceId: getRecordFieldInputId(
-          recordId ?? '',
-          'Boolean',
-          'record-table-cell',
-        ),
+        instanceId: getRecordFieldInputInstanceId({
+          recordId: recordId ?? '',
+          fieldName: 'Boolean',
+          prefix: RECORD_TABLE_CELL_INPUT_ID_PREFIX,
+        }),
       }}
     >
       <FieldContext.Provider
diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/DateTimeFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/DateTimeFieldInput.stories.tsx
index cc17cdb6f..679d549cb 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/DateTimeFieldInput.stories.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/DateTimeFieldInput.stories.tsx
@@ -2,13 +2,15 @@ import { Meta, StoryObj } from '@storybook/react';
 import { expect, fn, userEvent, within } from '@storybook/test';
 import { useEffect } from 'react';
 
-import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
+import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 
 import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
+import { RECORD_TABLE_CELL_INPUT_ID_PREFIX } from '@/object-record/record-table/constants/RecordTableCellInputIdPrefix';
 import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
-import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId';
+import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId';
+import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
 import { StorybookFieldInputDropdownFocusIdSetterEffect } from '~/testing/components/StorybookFieldInputDropdownFocusIdSetterEffect';
 import { useDateTimeField } from '../../../hooks/useDateTimeField';
 import {
@@ -52,7 +54,7 @@ const DateFieldValueGater = ({
 
 type DateFieldInputWithContextProps = DateTimeFieldInputProps & {
   value: Date;
-  recordId?: string;
+  recordId: string;
 };
 
 const DateFieldInputWithContext = ({
@@ -62,20 +64,28 @@ const DateFieldInputWithContext = ({
   onEnter,
   onClickOutside,
 }: DateFieldInputWithContextProps) => {
-  const setHotkeyScope = useSetHotkeyScope();
+  const { pushFocusItemToFocusStack } = usePushFocusItemToFocusStack();
+  const instanceId = getRecordFieldInputInstanceId({
+    recordId,
+    fieldName: 'Date',
+    prefix: RECORD_TABLE_CELL_INPUT_ID_PREFIX,
+  });
 
   useEffect(() => {
-    setHotkeyScope(DEFAULT_CELL_SCOPE.scope);
-  }, [setHotkeyScope]);
+    pushFocusItemToFocusStack({
+      focusId: instanceId,
+      component: {
+        type: FocusComponentType.OPENED_FIELD_INPUT,
+        instanceId: instanceId,
+      },
+      hotkeyScope: DEFAULT_CELL_SCOPE,
+    });
+  }, [pushFocusItemToFocusStack, instanceId]);
 
   return (
     <RecordFieldComponentInstanceContext.Provider
       value={{
-        instanceId: getRecordFieldInputId(
-          recordId ?? '',
-          'Date',
-          'record-table-cell',
-        ),
+        instanceId: instanceId,
       }}
     >
       <FieldContext.Provider
@@ -91,7 +101,7 @@ const DateFieldInputWithContext = ({
               objectMetadataNameSingular: 'person',
             },
           },
-          recordId: '123',
+          recordId,
           isLabelIdentifier: false,
           isReadOnly: false,
         }}
diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/EmailsFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/EmailsFieldInput.stories.tsx
index 943c1e89f..11d0b6ccb 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/EmailsFieldInput.stories.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/EmailsFieldInput.stories.tsx
@@ -8,9 +8,11 @@ import { FieldContext } from '@/object-record/record-field/contexts/FieldContext
 import { useEmailsField } from '@/object-record/record-field/meta-types/hooks/useEmailsField';
 import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
 import { FieldEmailsValue } from '@/object-record/record-field/types/FieldMetadata';
+import { RECORD_TABLE_CELL_INPUT_ID_PREFIX } from '@/object-record/record-table/constants/RecordTableCellInputIdPrefix';
 import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
-import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId';
-import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
+import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId';
+import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
+import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 import { EmailsFieldInput } from '../EmailsFieldInput';
 
@@ -57,20 +59,28 @@ const EmailInputWithContext = ({
   onCancel,
   onClickOutside,
 }: EmailInputWithContextProps) => {
-  const setHotkeyScope = useSetHotkeyScope();
+  const { pushFocusItemToFocusStack } = usePushFocusItemToFocusStack();
+  const instanceId = getRecordFieldInputInstanceId({
+    recordId,
+    fieldName: 'emails',
+    prefix: RECORD_TABLE_CELL_INPUT_ID_PREFIX,
+  });
 
   useEffect(() => {
-    setHotkeyScope(DEFAULT_CELL_SCOPE.scope);
-  }, [setHotkeyScope]);
+    pushFocusItemToFocusStack({
+      focusId: instanceId,
+      component: {
+        type: FocusComponentType.OPENED_FIELD_INPUT,
+        instanceId: instanceId,
+      },
+      hotkeyScope: DEFAULT_CELL_SCOPE,
+    });
+  }, [pushFocusItemToFocusStack, instanceId]);
 
   return (
     <RecordFieldComponentInstanceContext.Provider
       value={{
-        instanceId: getRecordFieldInputId(
-          recordId,
-          'emails',
-          'record-table-cell',
-        ),
+        instanceId: instanceId,
       }}
     >
       <FieldContext.Provider
diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/LinksFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/LinksFieldInput.stories.tsx
index 601580f2a..4da7a3d2a 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/LinksFieldInput.stories.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/LinksFieldInput.stories.tsx
@@ -5,9 +5,11 @@ import { useEffect } from 'react';
 import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 import { useLinksField } from '@/object-record/record-field/meta-types/hooks/useLinksField';
 import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
+import { RECORD_TABLE_CELL_INPUT_ID_PREFIX } from '@/object-record/record-table/constants/RecordTableCellInputIdPrefix';
 import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
-import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId';
-import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
+import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId';
+import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
+import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
 import { getCanvasElementForDropdownTesting } from 'twenty-ui/testing';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 import { LinksFieldInput } from '../LinksFieldInput';
@@ -38,7 +40,7 @@ type LinksInputWithContextProps = {
     primaryLinkLabel: string | null;
     secondaryLinks: Array<{ url: string | null; label: string | null }> | null;
   };
-  recordId?: string;
+  recordId: string;
   onCancel?: () => void;
   onClickOutside?: (event: MouseEvent | TouchEvent) => void;
 };
@@ -67,21 +69,29 @@ const LinksInputWithContext = ({
   onCancel,
   onClickOutside,
 }: LinksInputWithContextProps) => {
-  const setHotkeyScope = useSetHotkeyScope();
+  const { pushFocusItemToFocusStack } = usePushFocusItemToFocusStack();
+  const instanceId = getRecordFieldInputInstanceId({
+    recordId,
+    fieldName: 'Links',
+    prefix: RECORD_TABLE_CELL_INPUT_ID_PREFIX,
+  });
 
   useEffect(() => {
-    setHotkeyScope(DEFAULT_CELL_SCOPE.scope);
-  }, [setHotkeyScope]);
+    pushFocusItemToFocusStack({
+      focusId: instanceId,
+      component: {
+        type: FocusComponentType.OPENED_FIELD_INPUT,
+        instanceId: instanceId,
+      },
+      hotkeyScope: DEFAULT_CELL_SCOPE,
+    });
+  }, [pushFocusItemToFocusStack, instanceId]);
 
   return (
     <div>
       <RecordFieldComponentInstanceContext.Provider
         value={{
-          instanceId: getRecordFieldInputId(
-            recordId ?? '',
-            'Links',
-            'record-table-cell',
-          ),
+          instanceId: instanceId,
         }}
       >
         <FieldContext.Provider
@@ -97,7 +107,7 @@ const LinksInputWithContext = ({
                 objectMetadataNameSingular: 'company',
               },
             },
-            recordId: recordId ?? '123',
+            recordId,
             isLabelIdentifier: false,
             isReadOnly: false,
             useUpdateRecord: () => [updateRecord, { loading: false }],
@@ -131,6 +141,7 @@ const meta: Meta = {
       primaryLinkLabel: null,
       secondaryLinks: null,
     },
+    recordId: '123',
     onCancel: cancelJestFn,
     onClickOutside: clickOutsideJestFn,
   },
diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/NumberFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/NumberFieldInput.stories.tsx
index 5300866e6..91d423c9c 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/NumberFieldInput.stories.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/NumberFieldInput.stories.tsx
@@ -2,14 +2,16 @@ import { Decorator, Meta, StoryObj } from '@storybook/react';
 import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
 import { useEffect, useState } from 'react';
 
-import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
+import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 
 import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
+import { RECORD_TABLE_CELL_INPUT_ID_PREFIX } from '@/object-record/record-table/constants/RecordTableCellInputIdPrefix';
 import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
-import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId';
+import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId';
+import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
 import { StorybookFieldInputDropdownFocusIdSetterEffect } from '~/testing/components/StorybookFieldInputDropdownFocusIdSetterEffect';
 import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
 import { useNumberField } from '../../../hooks/useNumberField';
@@ -27,7 +29,7 @@ const NumberFieldValueSetterEffect = ({ value }: { value: number }) => {
 
 type NumberFieldInputWithContextProps = NumberFieldInputProps & {
   value: number;
-  recordId?: string;
+  recordId: string;
 };
 
 const NumberFieldInputWithContext = ({
@@ -39,25 +41,38 @@ const NumberFieldInputWithContext = ({
   onTab,
   onShiftTab,
 }: NumberFieldInputWithContextProps) => {
-  const setHotKeyScope = useSetHotkeyScope();
+  const { pushFocusItemToFocusStack } = usePushFocusItemToFocusStack();
 
   const [isReady, setIsReady] = useState(false);
 
+  const instanceId = getRecordFieldInputInstanceId({
+    recordId,
+    fieldName: 'Number',
+    prefix: RECORD_TABLE_CELL_INPUT_ID_PREFIX,
+  });
+
   useEffect(() => {
     if (!isReady) {
-      setHotKeyScope(DEFAULT_CELL_SCOPE.scope);
+      pushFocusItemToFocusStack({
+        focusId: instanceId,
+        component: {
+          type: FocusComponentType.OPENED_FIELD_INPUT,
+          instanceId: instanceId,
+        },
+        hotkeyScope: DEFAULT_CELL_SCOPE,
+      });
       setIsReady(true);
     }
-  }, [isReady, setHotKeyScope]);
+  }, [isReady, pushFocusItemToFocusStack, instanceId]);
 
   return (
     <RecordFieldComponentInstanceContext.Provider
       value={{
-        instanceId: getRecordFieldInputId(
-          recordId ?? '',
-          'Number',
-          'record-table-cell',
-        ),
+        instanceId: getRecordFieldInputInstanceId({
+          recordId,
+          fieldName: 'Number',
+          prefix: RECORD_TABLE_CELL_INPUT_ID_PREFIX,
+        }),
       }}
     >
       <FieldContext.Provider
diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/PhonesFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/PhonesFieldInput.stories.tsx
index a55b44b4a..7dd6d6cfe 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/PhonesFieldInput.stories.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/PhonesFieldInput.stories.tsx
@@ -9,9 +9,11 @@ import { usePhonesField } from '@/object-record/record-field/meta-types/hooks/us
 import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
 import { FieldInputClickOutsideEvent } from '@/object-record/record-field/types/FieldInputEvent';
 import { FieldPhonesValue } from '@/object-record/record-field/types/FieldMetadata';
+import { RECORD_TABLE_CELL_INPUT_ID_PREFIX } from '@/object-record/record-table/constants/RecordTableCellInputIdPrefix';
 import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
-import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId';
-import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
+import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId';
+import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
+import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 import { PhonesFieldInput } from '../PhonesFieldInput';
 
@@ -58,20 +60,28 @@ const PhoneInputWithContext = ({
   onCancel,
   onClickOutside,
 }: PhoneInputWithContextProps) => {
-  const setHotkeyScope = useSetHotkeyScope();
+  const { pushFocusItemToFocusStack } = usePushFocusItemToFocusStack();
+  const instanceId = getRecordFieldInputInstanceId({
+    recordId,
+    fieldName: 'phones',
+    prefix: RECORD_TABLE_CELL_INPUT_ID_PREFIX,
+  });
 
   useEffect(() => {
-    setHotkeyScope(DEFAULT_CELL_SCOPE.scope);
-  }, [setHotkeyScope]);
+    pushFocusItemToFocusStack({
+      focusId: instanceId,
+      component: {
+        type: FocusComponentType.OPENED_FIELD_INPUT,
+        instanceId: instanceId,
+      },
+      hotkeyScope: DEFAULT_CELL_SCOPE,
+    });
+  }, [pushFocusItemToFocusStack, instanceId]);
 
   return (
     <RecordFieldComponentInstanceContext.Provider
       value={{
-        instanceId: getRecordFieldInputId(
-          recordId,
-          'phones',
-          'record-table-cell',
-        ),
+        instanceId: instanceId,
       }}
     >
       <FieldContext.Provider
diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RatingFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RatingFieldInput.stories.tsx
index 21751c7c8..d30937167 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RatingFieldInput.stories.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RatingFieldInput.stories.tsx
@@ -2,12 +2,14 @@ import { Decorator, Meta, StoryObj } from '@storybook/react';
 import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
 import { useEffect } from 'react';
 
-import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
+import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
 
 import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
+import { RECORD_TABLE_CELL_INPUT_ID_PREFIX } from '@/object-record/record-table/constants/RecordTableCellInputIdPrefix';
 import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
-import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId';
+import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId';
+import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
 import { FieldMetadataType } from 'twenty-shared/types';
 import { FieldRatingValue } from '../../../../types/FieldMetadata';
 import { useRatingField } from '../../../hooks/useRatingField';
@@ -29,7 +31,7 @@ const RatingFieldValueSetterEffect = ({
 
 type RatingFieldInputWithContextProps = RatingFieldInputProps & {
   value: FieldRatingValue;
-  recordId?: string;
+  recordId: string;
 };
 
 const RatingFieldInputWithContext = ({
@@ -37,20 +39,29 @@ const RatingFieldInputWithContext = ({
   value,
   onSubmit,
 }: RatingFieldInputWithContextProps) => {
-  const setHotKeyScope = useSetHotkeyScope();
+  const { pushFocusItemToFocusStack } = usePushFocusItemToFocusStack();
+
+  const instanceId = getRecordFieldInputInstanceId({
+    recordId,
+    fieldName: 'Rating',
+    prefix: RECORD_TABLE_CELL_INPUT_ID_PREFIX,
+  });
 
   useEffect(() => {
-    setHotKeyScope(DEFAULT_CELL_SCOPE.scope);
-  }, [setHotKeyScope]);
+    pushFocusItemToFocusStack({
+      focusId: instanceId,
+      component: {
+        type: FocusComponentType.OPENED_FIELD_INPUT,
+        instanceId: instanceId,
+      },
+      hotkeyScope: DEFAULT_CELL_SCOPE,
+    });
+  }, [pushFocusItemToFocusStack, instanceId]);
 
   return (
     <RecordFieldComponentInstanceContext.Provider
       value={{
-        instanceId: getRecordFieldInputId(
-          recordId ?? '',
-          'Rating',
-          'record-table-cell',
-        ),
+        instanceId: instanceId,
       }}
     >
       <FieldContext.Provider
diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RelationFromManyFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RelationFromManyFieldInput.stories.tsx
index ac0702157..3fd8d7675 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RelationFromManyFieldInput.stories.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RelationFromManyFieldInput.stories.tsx
@@ -5,7 +5,7 @@ import { useSetRecoilState } from 'recoil';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { RelationFromManyFieldInput } from '@/object-record/record-field/meta-types/input/components/RelationFromManyFieldInput';
-import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
+import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
 import { ComponentWithRecoilScopeDecorator } from '~/testing/decorators/ComponentWithRecoilScopeDecorator';
 import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
@@ -19,9 +19,9 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
 import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 import { useOpenFieldInputEditMode } from '@/object-record/record-field/hooks/useOpenFieldInputEditMode';
 import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
-import { getFieldInputInstanceId } from '@/object-record/record-field/utils/getFieldInputInstanceId';
 import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
-import { DropdownHotkeyScope } from '@/ui/layout/dropdown/constants/DropdownHotkeyScope';
+import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
+import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
 import { FieldMetadataType } from 'twenty-shared/types';
 import { RelationType } from '~/generated-metadata/graphql';
 
@@ -40,7 +40,7 @@ const RelationWorkspaceSetterEffect = () => {
 };
 
 const RelationManyFieldInputWithContext = () => {
-  const setHotKeyScope = useSetHotkeyScope();
+  const { pushFocusItemToFocusStack } = usePushFocusItemToFocusStack();
 
   const fieldDefinition = useMemo(
     () => ({
@@ -72,7 +72,14 @@ const RelationManyFieldInputWithContext = () => {
   useEffect(() => {
     setRecordStoreFieldValue([]);
 
-    setHotKeyScope(DropdownHotkeyScope.Dropdown);
+    pushFocusItemToFocusStack({
+      focusId: 'relation-from-many-field-input',
+      component: {
+        type: FocusComponentType.OPENED_FIELD_INPUT,
+        instanceId: 'relation-from-many-field-input',
+      },
+      hotkeyScope: DEFAULT_CELL_SCOPE,
+    });
     openFieldInput({
       fieldDefinition,
       recordId: 'recordId',
@@ -80,7 +87,7 @@ const RelationManyFieldInputWithContext = () => {
   }, [
     fieldDefinition,
     openFieldInput,
-    setHotKeyScope,
+    pushFocusItemToFocusStack,
     setRecordStoreFieldValue,
   ]);
 
@@ -88,10 +95,7 @@ const RelationManyFieldInputWithContext = () => {
     <div>
       <RecordFieldComponentInstanceContext.Provider
         value={{
-          instanceId: getFieldInputInstanceId({
-            recordId: 'recordId',
-            fieldName: 'people',
-          }),
+          instanceId: 'relation-from-many-field-input',
         }}
       >
         <FieldContext.Provider
diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RelationToOneFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RelationToOneFieldInput.stories.tsx
index d3e67791d..d9bfc3ce3 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RelationToOneFieldInput.stories.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RelationToOneFieldInput.stories.tsx
@@ -18,8 +18,7 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
 import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
 import { recordFieldInputLayoutDirectionLoadingComponentState } from '@/object-record/record-field/states/recordFieldInputLayoutDirectionLoadingComponentState';
-import { getFieldInputInstanceId } from '@/object-record/record-field/utils/getFieldInputInstanceId';
-import { DropdownHotkeyScope } from '@/ui/layout/dropdown/constants/DropdownHotkeyScope';
+import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
 import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
 import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
@@ -68,24 +67,13 @@ const RelationToOneFieldInputWithContext = ({
 
   useEffect(() => {
     pushFocusItemToFocusStack({
-      focusId: getFieldInputInstanceId({
-        recordId: '123',
-        fieldName: 'Relation',
-      }),
+      focusId: 'relation-to-one-field-input',
       component: {
         type: FocusComponentType.DROPDOWN,
-        instanceId: getFieldInputInstanceId({
-          recordId: '123',
-          fieldName: 'Relation',
-        }),
+        instanceId: 'relation-to-one-field-input',
       },
-      hotkeyScope: {
-        scope: DropdownHotkeyScope.Dropdown,
-      },
-      memoizeKey: getFieldInputInstanceId({
-        recordId: '123',
-        fieldName: 'Relation',
-      }),
+      hotkeyScope: DEFAULT_CELL_SCOPE,
+      memoizeKey: 'relation-to-one-field-input',
     });
   }, [pushFocusItemToFocusStack]);
 
diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RichTextFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RichTextFieldInput.stories.tsx
index c97b7ae7d..dbd529237 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RichTextFieldInput.stories.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/RichTextFieldInput.stories.tsx
@@ -4,8 +4,11 @@ import { useEffect } from 'react';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
+import { RECORD_TABLE_CELL_INPUT_ID_PREFIX } from '@/object-record/record-table/constants/RecordTableCellInputIdPrefix';
 import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
-import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
+import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId';
+import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
+import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
 import { Decorator, Meta, StoryObj } from '@storybook/react';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
@@ -35,16 +38,29 @@ const RichTextFieldInputWithContext = ({
   onClickOutside,
   onEscape,
 }: RichTextFieldInputWithContextProps) => {
-  const setHotKeyScope = useSetHotkeyScope();
+  const { pushFocusItemToFocusStack } = usePushFocusItemToFocusStack();
+
+  const instanceId = getRecordFieldInputInstanceId({
+    recordId: targetableObjectId,
+    fieldName: 'richText',
+    prefix: RECORD_TABLE_CELL_INPUT_ID_PREFIX,
+  });
 
   useEffect(() => {
-    setHotKeyScope(DEFAULT_CELL_SCOPE.scope);
-  }, [setHotKeyScope]);
+    pushFocusItemToFocusStack({
+      focusId: instanceId,
+      component: {
+        type: FocusComponentType.OPENED_FIELD_INPUT,
+        instanceId: instanceId,
+      },
+      hotkeyScope: DEFAULT_CELL_SCOPE,
+    });
+  }, [pushFocusItemToFocusStack, instanceId]);
 
   return (
     <RecordFieldComponentInstanceContext.Provider
       value={{
-        instanceId: 'record-field-component-instance-id',
+        instanceId: instanceId,
       }}
     >
       <FieldContext.Provider
diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/TextFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/TextFieldInput.stories.tsx
index 615f62155..6cb873bb3 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/TextFieldInput.stories.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/TextFieldInput.stories.tsx
@@ -1,18 +1,20 @@
 import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
 import { useEffect, useState } from 'react';
 
-import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
+import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
 
 import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
+import { RECORD_TABLE_CELL_INPUT_ID_PREFIX } from '@/object-record/record-table/constants/RecordTableCellInputIdPrefix';
 import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
+import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId';
+import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
 import { Decorator, Meta, StoryObj } from '@storybook/react';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
 import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
 import { useTextField } from '../../../hooks/useTextField';
 import { TextFieldInput, TextFieldInputProps } from '../TextFieldInput';
-
 const TextFieldValueSetterEffect = ({ value }: { value: string }) => {
   const { setFieldValue } = useTextField();
 
@@ -25,7 +27,7 @@ const TextFieldValueSetterEffect = ({ value }: { value: string }) => {
 
 type TextFieldInputWithContextProps = TextFieldInputProps & {
   value: string;
-  recordId?: string;
+  recordId: string;
 };
 
 const TextFieldInputWithContext = ({
@@ -37,26 +39,39 @@ const TextFieldInputWithContext = ({
   onTab,
   onShiftTab,
 }: TextFieldInputWithContextProps) => {
-  const setHotKeyScope = useSetHotkeyScope();
-
+  const { pushFocusItemToFocusStack } = usePushFocusItemToFocusStack();
   const [isReady, setIsReady] = useState(false);
 
+  const instanceId = getRecordFieldInputInstanceId({
+    recordId,
+    fieldName: 'Text',
+    prefix: RECORD_TABLE_CELL_INPUT_ID_PREFIX,
+  });
+
   useEffect(() => {
     if (!isReady) {
-      setHotKeyScope(DEFAULT_CELL_SCOPE.scope);
+      pushFocusItemToFocusStack({
+        focusId: instanceId,
+        component: {
+          type: FocusComponentType.OPENED_FIELD_INPUT,
+          instanceId: instanceId,
+        },
+        hotkeyScope: DEFAULT_CELL_SCOPE,
+      });
+
       setIsReady(true);
     }
-  }, [isReady, setHotKeyScope]);
+  }, [isReady, pushFocusItemToFocusStack, instanceId]);
 
   return (
     <RecordFieldComponentInstanceContext.Provider
       value={{
-        instanceId: 'record-field-component-instance-id',
+        instanceId: instanceId,
       }}
     >
       <FieldContext.Provider
         value={{
-          recordId: recordId ?? '123',
+          recordId,
           fieldDefinition: {
             fieldMetadataId: 'text',
             label: 'Text',
diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/hooks/useOpenRelationFromManyFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/hooks/useOpenRelationFromManyFieldInput.tsx
index 161572174..2c32eef8f 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/hooks/useOpenRelationFromManyFieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/hooks/useOpenRelationFromManyFieldInput.tsx
@@ -3,7 +3,6 @@ import {
   FieldRelationFromManyValue,
   FieldRelationValue,
 } from '@/object-record/record-field/types/FieldMetadata';
-import { getFieldInputInstanceId } from '@/object-record/record-field/utils/getFieldInputInstanceId';
 import { useMultipleRecordPickerOpen } from '@/object-record/record-picker/multiple-record-picker/hooks/useMultipleRecordPickerOpen';
 import { useMultipleRecordPickerPerformSearch } from '@/object-record/record-picker/multiple-record-picker/hooks/useMultipleRecordPickerPerformSearch';
 import { multipleRecordPickerPickableMorphItemsComponentState } from '@/object-record/record-picker/multiple-record-picker/states/multipleRecordPickerPickableMorphItemsComponentState';
@@ -11,6 +10,7 @@ import { multipleRecordPickerSearchableObjectMetadataItemsComponentState } from
 import { RecordPickerPickableMorphItem } from '@/object-record/record-picker/types/RecordPickerPickableMorphItem';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
 import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
+import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId';
 import { DropdownHotkeyScope } from '@/ui/layout/dropdown/constants/DropdownHotkeyScope';
 import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
 import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
@@ -28,14 +28,17 @@ export const useOpenRelationFromManyFieldInput = () => {
         fieldName,
         objectNameSingular,
         recordId,
+        prefix,
       }: {
         fieldName: string;
         objectNameSingular: string;
         recordId: string;
+        prefix?: string;
       }) => {
-        const recordPickerInstanceId = getFieldInputInstanceId({
+        const recordPickerInstanceId = getRecordFieldInputInstanceId({
           recordId,
           fieldName,
+          prefix,
         });
 
         const fieldValue = snapshot
diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/hooks/useOpenRelationToOneFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/hooks/useOpenRelationToOneFieldInput.tsx
index 9a84935ad..b8ee44c01 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/hooks/useOpenRelationToOneFieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/hooks/useOpenRelationToOneFieldInput.tsx
@@ -2,10 +2,10 @@ import {
   FieldRelationToOneValue,
   FieldRelationValue,
 } from '@/object-record/record-field/types/FieldMetadata';
-import { getFieldInputInstanceId } from '@/object-record/record-field/utils/getFieldInputInstanceId';
 import { useSingleRecordPickerOpen } from '@/object-record/record-picker/single-record-picker/hooks/useSingleRecordPickerOpen';
 import { singleRecordPickerSelectedIdComponentState } from '@/object-record/record-picker/single-record-picker/states/singleRecordPickerSelectedIdComponentState';
 import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
+import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId';
 import { DropdownHotkeyScope } from '@/ui/layout/dropdown/constants/DropdownHotkeyScope';
 import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
 import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
@@ -18,10 +18,19 @@ export const useOpenRelationToOneFieldInput = () => {
 
   const openRelationToOneFieldInput = useRecoilCallback(
     ({ set, snapshot }) =>
-      ({ fieldName, recordId }: { fieldName: string; recordId: string }) => {
-        const recordPickerInstanceId = getFieldInputInstanceId({
+      ({
+        fieldName,
+        recordId,
+        prefix,
+      }: {
+        fieldName: string;
+        recordId: string;
+        prefix?: string;
+      }) => {
+        const recordPickerInstanceId = getRecordFieldInputInstanceId({
           recordId,
           fieldName,
+          prefix,
         });
         const fieldValue = snapshot
           .getLoadable<FieldRelationValue<FieldRelationToOneValue>>(
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 2f250506c..b66768770 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,6 +1,6 @@
 import { Key } from 'ts-key-enum';
 
-import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { isDefined } from 'twenty-shared/utils';
 
@@ -13,6 +13,7 @@ export const useRegisterInputEvents = <T>({
   onTab,
   onShiftTab,
   onClickOutside,
+  focusId,
   hotkeyScope,
 }: {
   inputRef: React.RefObject<any>;
@@ -23,6 +24,7 @@ export const useRegisterInputEvents = <T>({
   onTab?: (inputValue: T) => void;
   onShiftTab?: (inputValue: T) => void;
   onClickOutside?: (event: MouseEvent | TouchEvent, inputValue: T) => void;
+  focusId: string;
   hotkeyScope: string;
 }) => {
   useListenClickOutside({
@@ -34,39 +36,43 @@ export const useRegisterInputEvents = <T>({
     listenerId: hotkeyScope,
   });
 
-  useScopedHotkeys(
-    'enter',
-    () => {
+  useHotkeysOnFocusedElement({
+    keys: [Key.Enter],
+    callback: () => {
       onEnter?.(inputValue);
     },
-    hotkeyScope,
-    [onEnter, inputValue],
-  );
+    focusId,
+    scope: hotkeyScope,
+    dependencies: [onEnter, inputValue],
+  });
 
-  useScopedHotkeys(
-    [Key.Escape],
-    () => {
+  useHotkeysOnFocusedElement({
+    keys: [Key.Escape],
+    callback: () => {
       onEscape?.(inputValue);
     },
-    hotkeyScope,
-    [onEscape, inputValue],
-  );
+    focusId,
+    scope: hotkeyScope,
+    dependencies: [onEscape, inputValue],
+  });
 
-  useScopedHotkeys(
-    'tab',
-    () => {
+  useHotkeysOnFocusedElement({
+    keys: [Key.Tab],
+    callback: () => {
       onTab?.(inputValue);
     },
-    hotkeyScope,
-    [onTab, inputValue],
-  );
+    focusId,
+    scope: hotkeyScope,
+    dependencies: [onTab, inputValue],
+  });
 
-  useScopedHotkeys(
-    'shift+tab',
-    () => {
+  useHotkeysOnFocusedElement({
+    keys: [`${Key.Shift}+${Key.Tab}`],
+    callback: () => {
       onShiftTab?.(inputValue);
     },
-    hotkeyScope,
-    [onShiftTab, inputValue],
-  );
+    focusId,
+    scope: hotkeyScope,
+    dependencies: [onShiftTab, inputValue],
+  });
 };
diff --git a/packages/twenty-front/src/modules/object-record/record-field/utils/getFieldInputInstanceId.ts b/packages/twenty-front/src/modules/object-record/record-field/utils/getFieldInputInstanceId.ts
deleted file mode 100644
index 70c4a1a22..000000000
--- a/packages/twenty-front/src/modules/object-record/record-field/utils/getFieldInputInstanceId.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export const getFieldInputInstanceId = ({
-  recordId,
-  fieldName,
-}: {
-  recordId: string;
-  fieldName: string;
-}) => {
-  return `${recordId}-${fieldName}`;
-};
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 207212802..d51a79180 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
@@ -28,11 +28,14 @@ import {
 } from './RecordInlineCellContext';
 
 type RecordInlineCellProps = {
-  readonly?: boolean;
   loading?: boolean;
+  instanceIdPrefix?: string;
 };
 
-export const RecordInlineCell = ({ loading }: RecordInlineCellProps) => {
+export const RecordInlineCell = ({
+  loading,
+  instanceIdPrefix,
+}: RecordInlineCellProps) => {
   const {
     fieldDefinition,
     recordId,
@@ -47,13 +50,28 @@ export const RecordInlineCell = ({ loading }: RecordInlineCellProps) => {
 
   const onOpenEditMode = onOpenEditModeFromContext
     ? onOpenEditModeFromContext
-    : () => openFieldInput({ fieldDefinition, recordId });
+    : () =>
+        openFieldInput({
+          fieldDefinition,
+          recordId,
+          prefix: instanceIdPrefix,
+        });
 
   const onCloseEditMode = useCallback(() => {
     onCloseEditModeFromContext
       ? onCloseEditModeFromContext()
-      : closeFieldInput({ fieldDefinition, recordId });
-  }, [onCloseEditModeFromContext, closeFieldInput, fieldDefinition, recordId]);
+      : closeFieldInput({
+          fieldDefinition,
+          recordId,
+          prefix: instanceIdPrefix,
+        });
+  }, [
+    onCloseEditModeFromContext,
+    closeFieldInput,
+    fieldDefinition,
+    recordId,
+    instanceIdPrefix,
+  ]);
 
   const buttonIcon = useGetButtonIcon();
 
diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx
index 59115c498..f10b186f9 100644
--- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx
@@ -5,7 +5,7 @@ import { useContext } from 'react';
 import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 import { useFieldFocus } from '@/object-record/record-field/hooks/useFieldFocus';
 import { RecordInlineCellValue } from '@/object-record/record-inline-cell/components/RecordInlineCellValue';
-import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId';
+import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId';
 
 import { assertFieldMetadata } from '@/object-record/record-field/types/guards/assertFieldMetadata';
 import { isFieldText } from '@/object-record/record-field/types/guards/isFieldText';
@@ -123,10 +123,10 @@ export const RecordInlineCellContainer = () => {
   };
 
   const theme = useTheme();
-  const labelId = `label-${getRecordFieldInputId(
+  const labelId = `label-${getRecordFieldInputInstanceId({
     recordId,
-    fieldDefinition?.metadata?.fieldName,
-  )}`;
+    fieldName: fieldDefinition?.metadata?.fieldName,
+  })}`;
 
   return (
     <StyledInlineCellBaseContainer
diff --git a/packages/twenty-front/src/modules/object-record/record-picker/multiple-record-picker/components/MultipleRecordPicker.tsx b/packages/twenty-front/src/modules/object-record/record-picker/multiple-record-picker/components/MultipleRecordPicker.tsx
index b2884318f..88c1df5b1 100644
--- a/packages/twenty-front/src/modules/object-record/record-picker/multiple-record-picker/components/MultipleRecordPicker.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-picker/multiple-record-picker/components/MultipleRecordPicker.tsx
@@ -14,7 +14,6 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
 import { DropdownHotkeyScope } from '@/ui/layout/dropdown/constants/DropdownHotkeyScope';
 import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
 import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
-import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
 import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
 import { useRef } from 'react';
 import { useRecoilCallback } from 'recoil';
@@ -41,8 +40,6 @@ export const MultipleRecordPicker = ({
   componentInstanceId,
   focusId,
 }: MultipleRecordPickerProps) => {
-  const { goBackToPreviousHotkeyScope } = usePreviousHotkeyScope();
-
   const selectableListComponentInstanceId =
     getMultipleRecordPickerSelectableListId(componentInstanceId);
 
@@ -79,7 +76,6 @@ export const MultipleRecordPicker = ({
 
   const handleSubmit = () => {
     onSubmit?.();
-    goBackToPreviousHotkeyScope();
     resetSelectedItem();
     resetState();
   };
diff --git a/packages/twenty-front/src/modules/object-record/record-show/components/FieldsCard.tsx b/packages/twenty-front/src/modules/object-record/record-show/components/FieldsCard.tsx
index cdd8c4553..3b1f57cb0 100644
--- a/packages/twenty-front/src/modules/object-record/record-show/components/FieldsCard.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-show/components/FieldsCard.tsx
@@ -18,7 +18,7 @@ import { useRecordShowContainerActions } from '@/object-record/record-show/hooks
 import { useRecordShowContainerData } from '@/object-record/record-show/hooks/useRecordShowContainerData';
 import { RecordDetailDuplicatesSection } from '@/object-record/record-show/record-detail-section/components/RecordDetailDuplicatesSection';
 import { RecordDetailRelationSection } from '@/object-record/record-show/record-detail-section/components/RecordDetailRelationSection';
-import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId';
+import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId';
 import { isFieldCellSupported } from '@/object-record/utils/isFieldCellSupported';
 import { useIsInRightDrawerOrThrow } from '@/ui/layout/right-drawer/contexts/RightDrawerContext';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
@@ -28,6 +28,8 @@ type FieldsCardProps = {
   objectRecordId: string;
 };
 
+const INPUT_ID_PREFIX = 'fields-card';
+
 export const FieldsCard = ({
   objectNameSingular,
   objectRecordId,
@@ -139,13 +141,13 @@ export const FieldsCard = ({
                   }}
                 >
                   <ActivityTargetsInlineCell
-                    componentInstanceId={getRecordFieldInputId(
-                      objectRecordId,
-                      fieldMetadataItem.name,
-                      isInRightDrawer
+                    componentInstanceId={getRecordFieldInputInstanceId({
+                      recordId: objectRecordId,
+                      fieldName: fieldMetadataItem.name,
+                      prefix: isInRightDrawer
                         ? 'right-drawer-fields-card'
                         : 'fields-card',
-                    )}
+                    })}
                     activityObjectNameSingular={
                       objectNameSingular as
                         | CoreObjectNameSingular.Note
@@ -185,14 +187,17 @@ export const FieldsCard = ({
               >
                 <RecordFieldComponentInstanceContext.Provider
                   value={{
-                    instanceId: getRecordFieldInputId(
-                      objectRecordId,
-                      fieldMetadataItem.name,
-                      'fields-card',
-                    ),
+                    instanceId: getRecordFieldInputInstanceId({
+                      recordId: objectRecordId,
+                      fieldName: fieldMetadataItem.name,
+                      prefix: INPUT_ID_PREFIX,
+                    }),
                   }}
                 >
-                  <RecordInlineCell loading={recordLoading} />
+                  <RecordInlineCell
+                    loading={recordLoading}
+                    instanceIdPrefix={INPUT_ID_PREFIX}
+                  />
                 </RecordFieldComponentInstanceContext.Provider>
               </FieldContext.Provider>
             ))}
diff --git a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx
index 33733826e..c91535093 100644
--- a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx
@@ -29,7 +29,7 @@ import { RecordDetailRecordsListItem } from '@/object-record/record-show/record-
 import { getRecordFieldCardRelationPickerDropdownId } from '@/object-record/record-show/utils/getRecordFieldCardRelationPickerDropdownId';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { getForeignKeyNameFromRelationFieldName } from '@/object-record/utils/getForeignKeyNameFromRelationFieldName';
-import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId';
+import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId';
 import { isFieldCellSupported } from '@/object-record/utils/isFieldCellSupported';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
@@ -320,14 +320,14 @@ export const RecordDetailRelationRecordsListItem = ({
               >
                 <RecordFieldComponentInstanceContext.Provider
                   value={{
-                    instanceId: getRecordFieldInputId(
-                      relationRecord.id,
-                      fieldMetadataItem.name,
-                      'record-detail',
-                    ),
+                    instanceId: getRecordFieldInputInstanceId({
+                      recordId: relationRecord.id,
+                      fieldName: fieldMetadataItem.name,
+                      prefix: 'record-detail',
+                    }),
                   }}
                 >
-                  <RecordInlineCell />
+                  <RecordInlineCell instanceIdPrefix="record-detail" />
                 </RecordFieldComponentInstanceContext.Provider>
               </FieldContext.Provider>
             ),
diff --git a/packages/twenty-front/src/modules/object-record/record-table/constants/RecordTableCellInputIdPrefix.ts b/packages/twenty-front/src/modules/object-record/record-table/constants/RecordTableCellInputIdPrefix.ts
new file mode 100644
index 000000000..c4f68333e
--- /dev/null
+++ b/packages/twenty-front/src/modules/object-record/record-table/constants/RecordTableCellInputIdPrefix.ts
@@ -0,0 +1 @@
+export const RECORD_TABLE_CELL_INPUT_ID_PREFIX = 'record-table-cell';
diff --git a/packages/twenty-front/src/modules/object-record/record-table/hooks/useCreateNewIndexRecord.ts b/packages/twenty-front/src/modules/object-record/record-table/hooks/useCreateNewIndexRecord.ts
index 1532bf584..ce5572e6f 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/hooks/useCreateNewIndexRecord.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/useCreateNewIndexRecord.ts
@@ -1,5 +1,6 @@
 import { useOpenRecordInCommandMenu } from '@/command-menu/hooks/useOpenRecordInCommandMenu';
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { getLabelIdentifierFieldMetadataItem } from '@/object-metadata/utils/getLabelIdentifierFieldMetadataItem';
 import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
 import { recordIndexOpenRecordInState } from '@/object-record/record-index/states/recordIndexOpenRecordInState';
 import { useBuildRecordInputFromFilters } from '@/object-record/record-table/hooks/useBuildRecordInputFromFilters';
@@ -10,6 +11,7 @@ import { canOpenObjectInSidePanel } from '@/object-record/utils/canOpenObjectInS
 import { AppPath } from '@/types/AppPath';
 import { ViewOpenRecordInType } from '@/views/types/ViewOpenRecordInType';
 import { useRecoilCallback } from 'recoil';
+import { isDefined } from 'twenty-shared/utils';
 import { v4 } from 'uuid';
 import { useNavigateApp } from '~/hooks/useNavigateApp';
 
@@ -58,11 +60,16 @@ export const useCreateNewIndexRecord = ({
             isNewRecord: true,
           });
 
-          openRecordTitleCell({
-            recordId,
-            fieldMetadataId: objectMetadataItem.labelIdentifierFieldMetadataId,
-            containerType: RecordTitleCellContainerType.ShowPage,
-          });
+          const labelIdentifierFieldMetadataItem =
+            getLabelIdentifierFieldMetadataItem(objectMetadataItem);
+
+          if (isDefined(labelIdentifierFieldMetadataItem)) {
+            openRecordTitleCell({
+              recordId,
+              fieldName: labelIdentifierFieldMetadataItem.name,
+              containerType: RecordTitleCellContainerType.ShowPage,
+            });
+          }
         } else {
           navigate(AppPath.RecordShowPage, {
             objectNameSingular: objectMetadataItem.nameSingular,
@@ -74,8 +81,7 @@ export const useCreateNewIndexRecord = ({
       buildRecordInputFromFilters,
       createOneRecord,
       navigate,
-      objectMetadataItem.labelIdentifierFieldMetadataId,
-      objectMetadataItem.nameSingular,
+      objectMetadataItem,
       openRecordInCommandMenu,
       openRecordTitleCell,
     ],
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFieldContextWrapper.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFieldContextWrapper.tsx
index 5089c66e8..30083c505 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFieldContextWrapper.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFieldContextWrapper.tsx
@@ -1,11 +1,12 @@
 import { isLabelIdentifierField } from '@/object-metadata/utils/isLabelIdentifierField';
 import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
+import { RECORD_TABLE_CELL_INPUT_ID_PREFIX } from '@/object-record/record-table/constants/RecordTableCellInputIdPrefix';
 import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext';
 import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
 import { useRecordTableRowContextOrThrow } from '@/object-record/record-table/contexts/RecordTableRowContext';
 import { RecordTableCellFieldContextGeneric } from '@/object-record/record-table/record-table-cell/components/RecordTableCellFieldContextGeneric';
 import { RecordTableCellFieldContextLabelIdentifier } from '@/object-record/record-table/record-table-cell/components/RecordTableCellFieldContextLabelIdentifier';
-import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId';
+import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId';
 import { ReactNode, useContext } from 'react';
 import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
 
@@ -24,11 +25,11 @@ export const RecordTableCellFieldContextWrapper = ({
     return null;
   }
 
-  const instanceId = getRecordFieldInputId(
+  const instanceId = getRecordFieldInputInstanceId({
     recordId,
-    columnDefinition.metadata.fieldName,
-    'record-table-cell',
-  );
+    fieldName: columnDefinition.metadata.fieldName,
+    prefix: RECORD_TABLE_CELL_INPUT_ID_PREFIX,
+  });
 
   const isLabelIdentifier = isLabelIdentifierField({
     fieldMetadataItem: {
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 9df49aacb..5484f0c7e 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
@@ -7,6 +7,7 @@ import { isFieldValueEmpty } from '@/object-record/record-field/utils/isFieldVal
 import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
 import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
 import { FOCUS_CLICK_OUTSIDE_LISTENER_ID } from '@/object-record/record-table/constants/FocusClickOutsideListenerId';
+import { RECORD_TABLE_CELL_INPUT_ID_PREFIX } from '@/object-record/record-table/constants/RecordTableCellInputIdPrefix';
 import { useLeaveTableFocus } from '@/object-record/record-table/hooks/internal/useLeaveTableFocus';
 import { TableCellPosition } from '@/object-record/record-table/types/TableCellPosition';
 import { useDragSelect } from '@/ui/utilities/drag-select/hooks/useDragSelect';
@@ -20,7 +21,7 @@ import { viewableRecordNameSingularState } from '@/object-record/record-right-dr
 import { RECORD_TABLE_CLICK_OUTSIDE_LISTENER_ID } from '@/object-record/record-table/constants/RecordTableClickOutsideListenerId';
 import { recordTableCellEditModePositionComponentState } from '@/object-record/record-table/states/recordTableCellEditModePositionComponentState';
 import { getDropdownFocusIdForRecordField } from '@/object-record/utils/getDropdownFocusIdForRecordField';
-import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId';
+import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId';
 import { useSetActiveDropdownFocusIdAndMemorizePrevious } from '@/ui/layout/dropdown/hooks/useSetFocusedDropdownIdAndMemorizePrevious';
 
 import { useOpenRecordFromIndexView } from '@/object-record/record-index/hooks/useOpenRecordFromIndexView';
@@ -166,6 +167,7 @@ export const useOpenRecordTableCellV2 = (recordTableId: string) => {
         openFieldInput({
           fieldDefinition,
           recordId,
+          prefix: RECORD_TABLE_CELL_INPUT_ID_PREFIX,
         });
 
         setCurrentTableCellInEditModePosition(cellPosition);
@@ -174,11 +176,11 @@ export const useOpenRecordTableCellV2 = (recordTableId: string) => {
           value: initialValue,
           recordId,
           fieldDefinition,
-          fieldComponentInstanceId: getRecordFieldInputId(
+          fieldComponentInstanceId: getRecordFieldInputInstanceId({
             recordId,
-            fieldDefinition.metadata.fieldName,
-            'record-table-cell',
-          ),
+            fieldName: fieldDefinition.metadata.fieldName,
+            prefix: RECORD_TABLE_CELL_INPUT_ID_PREFIX,
+          }),
         });
 
         toggleClickOutside(false);
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 76e2d5938..9e5e7bd3f 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
@@ -18,7 +18,7 @@ import { RecordTitleCellFieldDisplay } from '@/object-record/record-title-cell/c
 import { RecordTitleCellFieldInput } from '@/object-record/record-title-cell/components/RecordTitleCellFieldInput';
 import { useRecordTitleCell } from '@/object-record/record-title-cell/hooks/useRecordTitleCell';
 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';
 
 type RecordTitleCellProps = {
   loading?: boolean;
@@ -37,54 +37,46 @@ export const RecordTitleCell = ({
 
   const { closeRecordTitleCell } = useRecordTitleCell();
 
-  const handleEnter: FieldInputEvent = (persistField) => {
+  const closeCell = () => {
     closeRecordTitleCell({
       recordId,
-      fieldMetadataId: fieldDefinition?.fieldMetadataId,
+      fieldName: fieldDefinition.metadata.fieldName,
       containerType,
     });
+  };
+
+  const handleEnter: FieldInputEvent = (persistField) => {
+    closeCell();
     persistField();
   };
 
-  const handleEscape: FieldInputEvent = (persistField) => {
-    closeRecordTitleCell({
-      recordId,
-      fieldMetadataId: fieldDefinition?.fieldMetadataId,
-      containerType,
-    });
-    persistField();
+  const handleEscape = () => {
+    closeCell();
   };
 
   const handleTab: FieldInputEvent = (persistField) => {
-    closeRecordTitleCell({
-      recordId,
-      fieldMetadataId: fieldDefinition?.fieldMetadataId,
-      containerType,
-    });
+    closeCell();
     persistField();
   };
 
   const handleShiftTab: FieldInputEvent = (persistField) => {
-    closeRecordTitleCell({
-      recordId,
-      fieldMetadataId: fieldDefinition?.fieldMetadataId,
-      containerType,
-    });
+    closeCell();
     persistField();
   };
 
   const handleClickOutside: FieldInputClickOutsideEvent = (persistField) => {
-    closeRecordTitleCell({
-      recordId,
-      fieldMetadataId: fieldDefinition?.fieldMetadataId,
-      containerType,
-    });
+    closeCell();
     persistField();
   };
 
   const recordTitleCellContextValue: RecordTitleCellContextProps = {
     editModeContent: (
       <RecordTitleCellFieldInput
+        instanceId={getRecordFieldInputInstanceId({
+          recordId,
+          fieldName: fieldDefinition.metadata.fieldName,
+          prefix: containerType,
+        })}
         onEnter={handleEnter}
         onEscape={handleEscape}
         onTab={handleTab}
@@ -93,7 +85,9 @@ export const RecordTitleCell = ({
         sizeVariant={sizeVariant}
       />
     ),
-    displayModeContent: <RecordTitleCellFieldDisplay />,
+    displayModeContent: (
+      <RecordTitleCellFieldDisplay containerType={containerType} />
+    ),
     editModeContentOnly: isFieldInputOnly,
     loading: loading,
     isReadOnly,
@@ -103,11 +97,11 @@ export const RecordTitleCell = ({
   return (
     <RecordFieldComponentInstanceContext.Provider
       value={{
-        instanceId: getRecordTitleCellId(
+        instanceId: getRecordFieldInputInstanceId({
           recordId,
-          fieldDefinition?.fieldMetadataId,
-          containerType,
-        ),
+          fieldName: fieldDefinition.metadata.fieldName,
+          prefix: containerType,
+        }),
       }}
     >
       <FieldFocusContextProvider>
diff --git a/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellFieldDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellFieldDisplay.tsx
index 1596ad3be..bcb4a4bee 100644
--- a/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellFieldDisplay.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellFieldDisplay.tsx
@@ -3,9 +3,14 @@ import { isFieldFullName } from '@/object-record/record-field/types/guards/isFie
 import { isFieldText } from '@/object-record/record-field/types/guards/isFieldText';
 import { RecordTitleCellSingleTextDisplayMode } from '@/object-record/record-title-cell/components/RecordTitleCellTextFieldDisplay';
 import { RecordTitleFullNameFieldDisplay } from '@/object-record/record-title-cell/components/RecordTitleFullNameFieldDisplay';
+import { RecordTitleCellContainerType } from '@/object-record/record-title-cell/types/RecordTitleCellContainerType';
 import { useContext } from 'react';
 
-export const RecordTitleCellFieldDisplay = () => {
+export const RecordTitleCellFieldDisplay = ({
+  containerType,
+}: {
+  containerType: RecordTitleCellContainerType;
+}) => {
   const { fieldDefinition } = useContext(FieldContext);
 
   if (!isFieldText(fieldDefinition) && !isFieldFullName(fieldDefinition)) {
@@ -15,9 +20,9 @@ export const RecordTitleCellFieldDisplay = () => {
   return (
     <>
       {isFieldText(fieldDefinition) ? (
-        <RecordTitleCellSingleTextDisplayMode />
+        <RecordTitleCellSingleTextDisplayMode containerType={containerType} />
       ) : isFieldFullName(fieldDefinition) ? (
-        <RecordTitleFullNameFieldDisplay />
+        <RecordTitleFullNameFieldDisplay containerType={containerType} />
       ) : null}
     </>
   );
diff --git a/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellFieldInput.tsx
index 2a499f08c..29d2e1396 100644
--- a/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellFieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellFieldInput.tsx
@@ -9,6 +9,7 @@ import { RecordTitleFullNameFieldInput } from '@/object-record/record-title-cell
 import { TitleInputHotkeyScope } from '@/ui/input/types/TitleInputHotkeyScope';
 
 type RecordTitleCellFieldInputProps = {
+  instanceId: string;
   onClickOutside?: (
     persist: () => void,
     event: MouseEvent | TouchEvent,
@@ -21,6 +22,7 @@ type RecordTitleCellFieldInputProps = {
 };
 
 export const RecordTitleCellFieldInput = ({
+  instanceId,
   sizeVariant,
   onEnter,
   onEscape,
@@ -38,6 +40,7 @@ export const RecordTitleCellFieldInput = ({
     <>
       {isFieldText(fieldDefinition) ? (
         <RecordTitleCellTextFieldInput
+          instanceId={instanceId}
           onEnter={onEnter}
           onEscape={onEscape}
           onClickOutside={onClickOutside}
diff --git a/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellTextFieldDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellTextFieldDisplay.tsx
index 56095428a..31e4acceb 100644
--- a/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellTextFieldDisplay.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellTextFieldDisplay.tsx
@@ -1,7 +1,7 @@
 import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
-import { RecordTitleCellContext } from '@/object-record/record-title-cell/components/RecordTitleCellContext';
 import { useRecordTitleCell } from '@/object-record/record-title-cell/hooks/useRecordTitleCell';
+import { RecordTitleCellContainerType } from '@/object-record/record-title-cell/types/RecordTitleCellContainerType';
 import { Theme, withTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useContext } from 'react';
@@ -30,7 +30,11 @@ const StyledEmptyText = withTheme(styled.div<{ theme: Theme }>`
   color: ${({ theme }) => theme.font.color.tertiary};
 `);
 
-export const RecordTitleCellSingleTextDisplayMode = () => {
+export const RecordTitleCellSingleTextDisplayMode = ({
+  containerType,
+}: {
+  containerType: RecordTitleCellContainerType;
+}) => {
   const { recordId, fieldDefinition } = useContext(FieldContext);
 
   const recordValue = useRecoilValue(recordStoreFamilyState(recordId));
@@ -40,14 +44,12 @@ export const RecordTitleCellSingleTextDisplayMode = () => {
 
   const { openRecordTitleCell } = useRecordTitleCell();
 
-  const { containerType } = useContext(RecordTitleCellContext);
-
   return (
     <StyledDiv
       onClick={() => {
         openRecordTitleCell({
           recordId,
-          fieldMetadataId: fieldDefinition.fieldMetadataId,
+          fieldName: fieldDefinition.metadata.fieldName,
           containerType,
         });
       }}
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 b56457c5a..2222b5be4 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
@@ -11,6 +11,7 @@ import { isDefined } from 'twenty-shared/utils';
 import { turnIntoUndefinedIfWhitespacesOnly } from '~/utils/string/turnIntoUndefinedIfWhitespacesOnly';
 
 type RecordTitleCellTextFieldInputProps = {
+  instanceId: string;
   onClickOutside?: FieldInputClickOutsideEvent;
   onEnter?: FieldInputEvent;
   onEscape?: FieldInputEvent;
@@ -21,6 +22,7 @@ type RecordTitleCellTextFieldInputProps = {
 };
 
 export const RecordTitleCellTextFieldInput = ({
+  instanceId,
   sizeVariant,
   onEnter,
   onEscape,
@@ -40,6 +42,7 @@ export const RecordTitleCellTextFieldInput = ({
   const persistField = usePersistField();
 
   useRegisterInputEvents<string>({
+    focusId: instanceId,
     inputRef: wrapperRef,
     inputValue: draftValue ?? '',
     onEnter: (inputValue) => {
diff --git a/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleDoubleTextInput.tsx b/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleDoubleTextInput.tsx
index 3b667dc61..888edd838 100644
--- a/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleDoubleTextInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleDoubleTextInput.tsx
@@ -2,13 +2,15 @@ import styled from '@emotion/styled';
 import { ClipboardEvent, useEffect, useRef, useState } from 'react';
 import { Key } from 'ts-key-enum';
 
+import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
 import { FieldDoubleText } from '@/object-record/record-field/types/FieldDoubleText';
 import { TextInputV2 } from '@/ui/input/components/TextInputV2';
-import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
+import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
+import { isDefined } from 'twenty-shared/utils';
 import { splitFullName } from '~/utils/format/spiltFullName';
 import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
-import { isDefined } from 'twenty-shared/utils';
 
 const StyledContainer = styled.div`
   display: flex;
@@ -82,33 +84,39 @@ export const RecordTitleDoubleTextInput = ({
 
   const [focusPosition, setFocusPosition] = useState<'left' | 'right'>('left');
 
-  useScopedHotkeys(
-    Key.Enter,
-    () => {
+  const instanceId = useAvailableComponentInstanceIdOrThrow(
+    RecordFieldComponentInstanceContext,
+  );
+
+  useHotkeysOnFocusedElement({
+    keys: [Key.Enter],
+    callback: () => {
       onEnter({
         firstValue: firstInternalValue,
         secondValue: secondInternalValue,
       });
     },
-    hotkeyScope,
-    [onEnter, firstInternalValue, secondInternalValue],
-  );
+    scope: hotkeyScope,
+    focusId: instanceId,
+    dependencies: [onEnter, firstInternalValue, secondInternalValue],
+  });
 
-  useScopedHotkeys(
-    [Key.Escape],
-    () => {
+  useHotkeysOnFocusedElement({
+    keys: [Key.Escape],
+    callback: () => {
       onEscape({
         firstValue: firstInternalValue,
         secondValue: secondInternalValue,
       });
     },
-    hotkeyScope,
-    [onEscape, firstInternalValue, secondInternalValue],
-  );
+    scope: hotkeyScope,
+    focusId: instanceId,
+    dependencies: [onEscape, firstInternalValue, secondInternalValue],
+  });
 
-  useScopedHotkeys(
-    'tab',
-    () => {
+  useHotkeysOnFocusedElement({
+    keys: ['tab'],
+    callback: () => {
       if (focusPosition === 'left') {
         setFocusPosition('right');
         secondValueInputRef.current?.focus();
@@ -119,13 +127,19 @@ export const RecordTitleDoubleTextInput = ({
         });
       }
     },
-    hotkeyScope,
-    [onTab, firstInternalValue, secondInternalValue, focusPosition],
-  );
+    scope: hotkeyScope,
+    focusId: instanceId,
+    dependencies: [
+      onTab,
+      firstInternalValue,
+      secondInternalValue,
+      focusPosition,
+    ],
+  });
 
-  useScopedHotkeys(
-    'shift+tab',
-    () => {
+  useHotkeysOnFocusedElement({
+    keys: ['shift+tab'],
+    callback: () => {
       if (focusPosition === 'right') {
         setFocusPosition('left');
         firstValueInputRef.current?.focus();
@@ -136,9 +150,15 @@ export const RecordTitleDoubleTextInput = ({
         });
       }
     },
-    hotkeyScope,
-    [onShiftTab, firstInternalValue, secondInternalValue, focusPosition],
-  );
+    scope: hotkeyScope,
+    focusId: instanceId,
+    dependencies: [
+      onShiftTab,
+      firstInternalValue,
+      secondInternalValue,
+      focusPosition,
+    ],
+  });
 
   useListenClickOutside({
     refs: [containerRef],
diff --git a/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleFullNameFieldDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleFullNameFieldDisplay.tsx
index 963111b5f..559107252 100644
--- a/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleFullNameFieldDisplay.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleFullNameFieldDisplay.tsx
@@ -2,8 +2,10 @@ import { FieldContext } from '@/object-record/record-field/contexts/FieldContext
 import { useFullNameFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useFullNameFieldDisplay';
 import { INLINE_CELL_HOTKEY_SCOPE_MEMOIZE_KEY } from '@/object-record/record-inline-cell/constants/InlineCellHotkeyScopeMemoizeKey';
 import { useInlineCell } from '@/object-record/record-inline-cell/hooks/useInlineCell';
+import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId';
 import { TitleInputHotkeyScope } from '@/ui/input/types/TitleInputHotkeyScope';
-import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
+import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
+import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
 import { Theme, withTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { isNonEmptyString } from '@sniptt/guards';
@@ -33,8 +35,12 @@ const StyledEmptyText = withTheme(styled.div<{ theme: Theme }>`
   color: ${({ theme }) => theme.font.color.tertiary};
 `);
 
-export const RecordTitleFullNameFieldDisplay = () => {
-  const { fieldDefinition } = useContext(FieldContext);
+export const RecordTitleFullNameFieldDisplay = ({
+  containerType,
+}: {
+  containerType: string;
+}) => {
+  const { recordId, fieldDefinition } = useContext(FieldContext);
 
   const { openInlineCell } = useInlineCell();
 
@@ -45,14 +51,29 @@ export const RecordTitleFullNameFieldDisplay = () => {
     .join(' ')
     .trim();
 
-  const { setHotkeyScopeAndMemorizePreviousScope } = usePreviousHotkeyScope();
+  const { pushFocusItemToFocusStack } = usePushFocusItemToFocusStack();
+
+  const recordTitleCellId = getRecordFieldInputInstanceId({
+    recordId,
+    fieldName: fieldDefinition.metadata.fieldName,
+    prefix: containerType,
+  });
+
   return (
     <StyledDiv
       onClick={() => {
-        setHotkeyScopeAndMemorizePreviousScope({
-          scope: TitleInputHotkeyScope.TitleInput,
+        pushFocusItemToFocusStack({
+          focusId: recordTitleCellId,
+          component: {
+            type: FocusComponentType.OPENED_FIELD_INPUT,
+            instanceId: recordTitleCellId,
+          },
+          hotkeyScope: {
+            scope: TitleInputHotkeyScope.TitleInput,
+          },
           memoizeKey: INLINE_CELL_HOTKEY_SCOPE_MEMOIZE_KEY,
         });
+
         openInlineCell();
       }}
     >
diff --git a/packages/twenty-front/src/modules/object-record/record-title-cell/hooks/useRecordTitleCell.tsx b/packages/twenty-front/src/modules/object-record/record-title-cell/hooks/useRecordTitleCell.tsx
index 4e18a4808..5a1094f77 100644
--- a/packages/twenty-front/src/modules/object-record/record-title-cell/hooks/useRecordTitleCell.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-title-cell/hooks/useRecordTitleCell.tsx
@@ -3,7 +3,7 @@ import { recordIndexFieldDefinitionsState } from '@/object-record/record-index/s
 import { INLINE_CELL_HOTKEY_SCOPE_MEMOIZE_KEY } from '@/object-record/record-inline-cell/constants/InlineCellHotkeyScopeMemoizeKey';
 import { isInlineCellInEditModeScopedState } from '@/object-record/record-inline-cell/states/isInlineCellInEditModeScopedState';
 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 { TitleInputHotkeyScope } from '@/ui/input/types/TitleInputHotkeyScope';
 import { useGoBackToPreviousDropdownFocusId } from '@/ui/layout/dropdown/hooks/useGoBackToPreviousDropdownFocusId';
 import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
@@ -25,26 +25,30 @@ export const useRecordTitleCell = () => {
     ({ set }) =>
       ({
         recordId,
-        fieldMetadataId,
+        fieldName,
         containerType,
       }: {
         recordId: string;
-        fieldMetadataId: string;
+        fieldName: string;
         containerType: RecordTitleCellContainerType;
       }) => {
         set(
           isInlineCellInEditModeScopedState(
-            getRecordTitleCellId(recordId, fieldMetadataId, containerType),
+            getRecordFieldInputInstanceId({
+              recordId,
+              fieldName,
+              prefix: containerType,
+            }),
           ),
           false,
         );
 
         removeFocusItemFromFocusStackById({
-          focusId: getRecordTitleCellId(
+          focusId: getRecordFieldInputInstanceId({
             recordId,
-            fieldMetadataId,
-            containerType,
-          ),
+            fieldName,
+            prefix: containerType,
+          }),
         });
 
         goBackToPreviousDropdownFocusId();
@@ -58,47 +62,47 @@ export const useRecordTitleCell = () => {
     ({ set, snapshot }) =>
       ({
         recordId,
-        fieldMetadataId,
+        fieldName,
         containerType,
         customEditHotkeyScopeForField,
       }: {
         recordId: string;
-        fieldMetadataId: string;
+        fieldName: string;
         containerType: RecordTitleCellContainerType;
         customEditHotkeyScopeForField?: HotkeyScope;
       }) => {
         if (isDefined(customEditHotkeyScopeForField)) {
           pushFocusItemToFocusStack({
-            focusId: getRecordTitleCellId(
+            focusId: getRecordFieldInputInstanceId({
               recordId,
-              fieldMetadataId,
-              containerType,
-            ),
+              fieldName,
+              prefix: containerType,
+            }),
             component: {
               type: FocusComponentType.OPENED_FIELD_INPUT,
-              instanceId: getRecordTitleCellId(
+              instanceId: getRecordFieldInputInstanceId({
                 recordId,
-                fieldMetadataId,
-                containerType,
-              ),
+                fieldName,
+                prefix: containerType,
+              }),
             },
             hotkeyScope: customEditHotkeyScopeForField,
             memoizeKey: INLINE_CELL_HOTKEY_SCOPE_MEMOIZE_KEY,
           });
         } else {
           pushFocusItemToFocusStack({
-            focusId: getRecordTitleCellId(
+            focusId: getRecordFieldInputInstanceId({
               recordId,
-              fieldMetadataId,
-              containerType,
-            ),
+              fieldName,
+              prefix: containerType,
+            }),
             component: {
               type: FocusComponentType.OPENED_FIELD_INPUT,
-              instanceId: getRecordTitleCellId(
+              instanceId: getRecordFieldInputInstanceId({
                 recordId,
-                fieldMetadataId,
-                containerType,
-              ),
+                fieldName,
+                prefix: containerType,
+              }),
             },
             hotkeyScope: {
               scope: TitleInputHotkeyScope.TitleInput,
@@ -107,11 +111,11 @@ export const useRecordTitleCell = () => {
           });
         }
 
-        const recordTitleCellId = getRecordTitleCellId(
+        const recordTitleCellId = getRecordFieldInputInstanceId({
           recordId,
-          fieldMetadataId,
-          containerType,
-        );
+          fieldName,
+          prefix: containerType,
+        });
         set(isInlineCellInEditModeScopedState(recordTitleCellId), true);
 
         const recordIndexFieldDefinitions = snapshot
@@ -119,7 +123,7 @@ export const useRecordTitleCell = () => {
           .getValue();
 
         const fieldDefinition = recordIndexFieldDefinitions.find(
-          (field) => field.fieldMetadataId === fieldMetadataId,
+          (field) => field.metadata.fieldName === fieldName,
         );
 
         if (!fieldDefinition) {
diff --git a/packages/twenty-front/src/modules/object-record/record-title-cell/utils/getRecordTitleCellId.ts b/packages/twenty-front/src/modules/object-record/record-title-cell/utils/getRecordTitleCellId.ts
deleted file mode 100644
index d5eab1920..000000000
--- a/packages/twenty-front/src/modules/object-record/record-title-cell/utils/getRecordTitleCellId.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { RecordTitleCellContainerType } from '@/object-record/record-title-cell/types/RecordTitleCellContainerType';
-
-export const getRecordTitleCellId = (
-  recordId: string,
-  fieldMetadataId: string,
-  containerType: RecordTitleCellContainerType,
-) => {
-  return `${recordId}-${fieldMetadataId}-${containerType}`;
-};
diff --git a/packages/twenty-front/src/modules/object-record/utils/getRecordFieldInputId.ts b/packages/twenty-front/src/modules/object-record/utils/getRecordFieldInputId.ts
index 5f4ae7ed0..937074520 100644
--- a/packages/twenty-front/src/modules/object-record/utils/getRecordFieldInputId.ts
+++ b/packages/twenty-front/src/modules/object-record/utils/getRecordFieldInputId.ts
@@ -1,9 +1,14 @@
 import { isDefined } from 'twenty-shared/utils';
-export const getRecordFieldInputId = (
-  recordId: string,
-  fieldName?: string,
-  prefix?: string,
-): string => {
+
+export const getRecordFieldInputInstanceId = ({
+  recordId,
+  fieldName,
+  prefix,
+}: {
+  recordId: string;
+  fieldName?: string;
+  prefix?: string;
+}): string => {
   if (isDefined(prefix)) {
     return `${prefix}-${recordId}-${fieldName}`;
   }
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsBlocklistInput.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsBlocklistInput.tsx
index 25b4ed406..a6d552a64 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsBlocklistInput.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsBlocklistInput.tsx
@@ -95,6 +95,7 @@ export const SettingsAccountsBlocklistInput = ({
             control={control}
             render={({ field: { value, onChange }, fieldState: { error } }) => (
               <TextInput
+                instanceId="settings-accounts-blocklist-input"
                 placeholder="eddy@gmail.com, @apple.com"
                 value={value}
                 onChange={onChange}
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SetttingsAccountsImapConnectionForm.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SetttingsAccountsImapConnectionForm.tsx
index 0b731cdd6..f5404afa3 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SetttingsAccountsImapConnectionForm.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SetttingsAccountsImapConnectionForm.tsx
@@ -44,6 +44,7 @@ export const SetttingsAccountsImapConnectionForm = ({
           defaultValue={defaultValues?.handle}
           render={({ field, fieldState }) => (
             <TextInput
+              instanceId="email-address-imap-connection-form"
               label={t`Email Address`}
               placeholder={t`john.doe@example.com`}
               value={field.value}
@@ -58,6 +59,7 @@ export const SetttingsAccountsImapConnectionForm = ({
           defaultValue={defaultValues?.host}
           render={({ field, fieldState }) => (
             <TextInput
+              instanceId="host-imap-connection-form"
               label={t`IMAP Server`}
               placeholder={t`imap.example.com`}
               value={field.value}
@@ -72,6 +74,7 @@ export const SetttingsAccountsImapConnectionForm = ({
           defaultValue={defaultValues?.port ?? 993}
           render={({ field, fieldState }) => (
             <TextInput
+              instanceId="port-imap-connection-form"
               label={t`IMAP Port`}
               type="number"
               placeholder={t`993`}
@@ -104,6 +107,7 @@ export const SetttingsAccountsImapConnectionForm = ({
           defaultValue={defaultValues?.password}
           render={({ field, fieldState }) => (
             <TextInput
+              instanceId="password-imap-connection-form"
               label={t`Password`}
               placeholder={t`••••••••`}
               type="password"
diff --git a/packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminGeneral.tsx b/packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminGeneral.tsx
index f3f166612..57ddcb110 100644
--- a/packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminGeneral.tsx
+++ b/packages/twenty-front/src/modules/settings/admin-panel/components/SettingsAdminGeneral.tsx
@@ -156,6 +156,7 @@ export const SettingsAdminGeneral = () => {
 
           <StyledContainer>
             <TextInput
+              instanceId="admin-user-lookup"
               value={userIdentifier}
               onChange={setUserIdentifier}
               onInputEnter={handleSearch}
diff --git a/packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/ConfigVariableDatabaseInput.tsx b/packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/ConfigVariableDatabaseInput.tsx
index 938da1a59..76408df67 100644
--- a/packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/ConfigVariableDatabaseInput.tsx
+++ b/packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/ConfigVariableDatabaseInput.tsx
@@ -60,6 +60,8 @@ export const ConfigVariableDatabaseInput = ({
     onChange(newValues);
   };
 
+  const jsonArrayTextAreaId = `${label}-json-array`;
+
   switch (type) {
     case ConfigVariableType.BOOLEAN:
       return (
@@ -134,6 +136,7 @@ export const ConfigVariableDatabaseInput = ({
             />
           ) : (
             <TextArea
+              textAreaId={jsonArrayTextAreaId}
               label={label}
               value={
                 Array.isArray(value)
diff --git a/packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/ConfigVariableSearchInput.tsx b/packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/ConfigVariableSearchInput.tsx
index 98ca3f07d..17c3a46c3 100644
--- a/packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/ConfigVariableSearchInput.tsx
+++ b/packages/twenty-front/src/modules/settings/admin-panel/config-variables/components/ConfigVariableSearchInput.tsx
@@ -18,6 +18,7 @@ export const ConfigVariableSearchInput = ({
 }: ConfigVariableSearchInputProps) => {
   return (
     <StyledSearchInput
+      instanceId="config-variable-search"
       placeholder={t`Search config variables`}
       value={value}
       onChange={onChange}
diff --git a/packages/twenty-front/src/modules/settings/components/SettingsCounter.tsx b/packages/twenty-front/src/modules/settings/components/SettingsCounter.tsx
index edfa944a1..d46d6786c 100644
--- a/packages/twenty-front/src/modules/settings/components/SettingsCounter.tsx
+++ b/packages/twenty-front/src/modules/settings/components/SettingsCounter.tsx
@@ -1,8 +1,8 @@
 import { TextInput } from '@/ui/input/components/TextInput';
 import styled from '@emotion/styled';
-import { castAsNumberOrNull } from '~/utils/cast-as-number-or-null';
-import { IconButton } from 'twenty-ui/input';
 import { IconMinus, IconPlus } from 'twenty-ui/display';
+import { IconButton } from 'twenty-ui/input';
+import { castAsNumberOrNull } from '~/utils/cast-as-number-or-null';
 
 type SettingsCounterProps = {
   value: number;
@@ -77,6 +77,7 @@ export const SettingsCounter = ({
         disabled={disabled}
       />
       <StyledTextInput
+        instanceId="settings-counter-input"
         name="counter"
         fullWidth
         value={value.toString()}
diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldDescriptionForm.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldDescriptionForm.tsx
index 8bf9236a7..6f7d44dc7 100644
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldDescriptionForm.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldDescriptionForm.tsx
@@ -29,6 +29,8 @@ export const SettingsDataModelFieldDescriptionForm = ({
   const { control } =
     useFormContext<SettingsDataModelFieldDescriptionFormValues>();
 
+  const descriptionTextAreaId = `${fieldMetadataItem?.id}-description`;
+
   return (
     <Controller
       name="description"
@@ -36,6 +38,7 @@ export const SettingsDataModelFieldDescriptionForm = ({
       defaultValue={fieldMetadataItem?.description}
       render={({ field: { onChange, value } }) => (
         <TextArea
+          textAreaId={descriptionTextAreaId}
           placeholder={t`Write a description`}
           minRows={4}
           value={value ?? undefined}
diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldIconLabelForm.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldIconLabelForm.tsx
index 0fd12e936..8086cbc2a 100644
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldIconLabelForm.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsDataModelFieldIconLabelForm.tsx
@@ -14,7 +14,6 @@ import { TextInput } from '@/ui/input/components/TextInput';
 import { useTheme } from '@emotion/react';
 import { useLingui } from '@lingui/react/macro';
 import { isDefined } from 'twenty-shared/utils';
-import { computeMetadataNameFromLabel } from '~/pages/settings/data-model/utils/compute-metadata-name-from-label.utils';
 import {
   AppTooltip,
   IconInfoCircle,
@@ -22,6 +21,7 @@ import {
   TooltipDelay,
 } from 'twenty-ui/display';
 import { Card } from 'twenty-ui/layout';
+import { computeMetadataNameFromLabel } from '~/pages/settings/data-model/utils/compute-metadata-name-from-label.utils';
 
 export const settingsDataModelFieldIconLabelFormSchema = (
   existingOtherLabels: string[] = [],
@@ -94,6 +94,9 @@ export const SettingsDataModelFieldIconLabelForm = ({
 
   const { t } = useLingui();
 
+  const labelTextInputId = `${fieldMetadataItem?.id}-label`;
+  const nameTextInputId = `${fieldMetadataItem?.id}-name`;
+
   const isLabelSyncedWithName =
     watch('isLabelSyncedWithName') ??
     (isDefined(fieldMetadataItem)
@@ -133,6 +136,7 @@ export const SettingsDataModelFieldIconLabelForm = ({
           defaultValue={fieldMetadataItem?.label}
           render={({ field: { onChange, value } }) => (
             <TextInput
+              instanceId={labelTextInputId}
               placeholder={t`Employees`}
               value={value}
               onChange={(value) => {
@@ -167,6 +171,7 @@ export const SettingsDataModelFieldIconLabelForm = ({
                     render={({ field: { onChange, value } }) => (
                       <>
                         <TextInput
+                          instanceId={nameTextInputId}
                           label={t`API Name`}
                           placeholder={t`employees`}
                           value={value}
diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsObjectNewFieldSelector.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsObjectNewFieldSelector.tsx
index 1fde22271..78221a4d3 100644
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsObjectNewFieldSelector.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/components/SettingsObjectNewFieldSelector.tsx
@@ -108,6 +108,7 @@ export const SettingsObjectNewFieldSelector = ({
       {' '}
       <Section>
         <StyledSearchInput
+          instanceId="new-field-type-search"
           LeftIcon={IconSearch}
           placeholder={t`Search a type`}
           value={searchQuery}
diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/date/components/SettingsDataModelFieldDateForm.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/date/components/SettingsDataModelFieldDateForm.tsx
index d8db554b1..f5a9d0fa4 100644
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/date/components/SettingsDataModelFieldDateForm.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/date/components/SettingsDataModelFieldDateForm.tsx
@@ -117,6 +117,7 @@ export const SettingsDataModelFieldDateForm = ({
           defaultValue={initialCustomUnicodeDateFormat}
           render={({ field: { onChange, value } }) => (
             <StyledTextInput
+              instanceId="custom-date-format-input"
               placeholder={t`Format e.g. d-MMM-y (qqq''yy)`}
               value={value}
               onChange={(value) => onChange(value)}
diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/relation/components/SettingsDataModelFieldRelationForm.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/relation/components/SettingsDataModelFieldRelationForm.tsx
index 8b4b86303..6c728a5e3 100644
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/relation/components/SettingsDataModelFieldRelationForm.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/relation/components/SettingsDataModelFieldRelationForm.tsx
@@ -187,6 +187,7 @@ export const SettingsDataModelFieldRelationForm = ({
           defaultValue={initialRelationFieldMetadataItem.label}
           render={({ field: { onChange, value } }) => (
             <TextInput
+              instanceId="relation-field-label"
               disabled={disableFieldEdition}
               placeholder={t`Field name`}
               value={value}
diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx
index 954bb98dc..13844f8e4 100644
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx
@@ -99,6 +99,7 @@ export const SettingsDataModelFieldSelectFormOptionRow = ({
       />
       <AdvancedSettingsWrapper animationDimension="width" hideDot>
         <StyledOptionInput
+          instanceId={`select-option-value-${option.id}`}
           value={option.value}
           onChange={(input) =>
             onChange({
@@ -133,6 +134,7 @@ export const SettingsDataModelFieldSelectFormOptionRow = ({
         }
       />
       <StyledOptionInput
+        instanceId={`select-option-label-${option.id}`}
         value={option.label}
         onChange={(label) => {
           const optionNameHasBeenEdited = !(
diff --git a/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx b/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx
index afbc3f9d9..7fd5ce83f 100644
--- a/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectAboutForm.tsx
@@ -123,6 +123,10 @@ export const SettingsDataModelObjectAboutForm = ({
     });
   };
 
+  const descriptionTextAreaId = `${objectMetadataItem?.id}-description`;
+  const labelSingularTextInputId = `${objectMetadataItem?.id}-label-singular`;
+  const labelPluralTextInputId = `${objectMetadataItem?.id}-label-plural`;
+
   return (
     <>
       <StyledInputsContainer>
@@ -150,6 +154,7 @@ export const SettingsDataModelObjectAboutForm = ({
           defaultValue={objectMetadataItem?.labelSingular ?? ''}
           render={({ field: { onChange, value }, formState: { errors } }) => (
             <TextInput
+              instanceId={labelSingularTextInputId}
               // TODO we should discuss on how to notify user about form validation schema issue, from now just displaying red borders
               noErrorHelper={true}
               error={errors.labelSingular?.message}
@@ -181,6 +186,7 @@ export const SettingsDataModelObjectAboutForm = ({
           defaultValue={objectMetadataItem?.labelPlural ?? ''}
           render={({ field: { onChange, value }, formState: { errors } }) => (
             <TextInput
+              instanceId={labelPluralTextInputId}
               // TODO we should discuss on how to notify user about form validation schema issue, from now just displaying red borders
               noErrorHelper={true}
               error={errors.labelPlural?.message}
@@ -210,6 +216,7 @@ export const SettingsDataModelObjectAboutForm = ({
         control={control}
         render={({ field: { onChange, value } }) => (
           <TextArea
+            textAreaId={descriptionTextAreaId}
             placeholder={t`Write a description`}
             minRows={4}
             value={value ?? undefined}
@@ -264,6 +271,7 @@ export const SettingsDataModelObjectAboutForm = ({
                       }) => (
                         <>
                           <TextInput
+                            instanceId={`${objectMetadataItem?.id}-${fieldName}`}
                             label={label}
                             placeholder={placeholder}
                             value={value}
diff --git a/packages/twenty-front/src/modules/settings/developers/components/ApiKeyInput.tsx b/packages/twenty-front/src/modules/settings/developers/components/ApiKeyInput.tsx
index 2aae99943..ca27a034d 100644
--- a/packages/twenty-front/src/modules/settings/developers/components/ApiKeyInput.tsx
+++ b/packages/twenty-front/src/modules/settings/developers/components/ApiKeyInput.tsx
@@ -28,7 +28,7 @@ export const ApiKeyInput = ({ apiKey }: ApiKeyInputProps) => {
   return (
     <StyledContainer>
       <StyledLinkContainer>
-        <TextInput value={apiKey} fullWidth />
+        <TextInput instanceId="api-key-display" value={apiKey} fullWidth />
       </StyledLinkContainer>
       <Button
         Icon={IconCopy}
diff --git a/packages/twenty-front/src/modules/settings/developers/components/ApiKeyNameInput.tsx b/packages/twenty-front/src/modules/settings/developers/components/ApiKeyNameInput.tsx
index c077472dd..e7e975ca7 100644
--- a/packages/twenty-front/src/modules/settings/developers/components/ApiKeyNameInput.tsx
+++ b/packages/twenty-front/src/modules/settings/developers/components/ApiKeyNameInput.tsx
@@ -56,9 +56,12 @@ export const ApiKeyNameInput = ({
     return debouncedUpdate.cancel;
   }, [debouncedUpdate, apiKeyName]);
 
+  const nameTextInputId = `${apiKeyId}-name`;
+
   return (
     <StyledComboInputContainer>
       <TextInput
+        instanceId={nameTextInputId}
         placeholder="E.g. backoffice integration"
         onChange={onNameUpdate}
         fullWidth
diff --git a/packages/twenty-front/src/modules/settings/developers/components/SettingsDevelopersWebhookForm.tsx b/packages/twenty-front/src/modules/settings/developers/components/SettingsDevelopersWebhookForm.tsx
index 04a47adb3..456f5da12 100644
--- a/packages/twenty-front/src/modules/settings/developers/components/SettingsDevelopersWebhookForm.tsx
+++ b/packages/twenty-front/src/modules/settings/developers/components/SettingsDevelopersWebhookForm.tsx
@@ -115,6 +115,10 @@ export const SettingsDevelopersWebhookForm = ({
     { label: 'Deleted', value: 'deleted', Icon: IconTrash },
   ];
 
+  const descriptionTextAreaId = `${webhookId}-description`;
+  const targetUrlTextInputId = `${webhookId}-target-url`;
+  const secretTextInputId = `${webhookId}-secret`;
+
   return (
     // eslint-disable-next-line react/jsx-props-no-spreading
     <FormProvider {...formConfig}>
@@ -156,6 +160,7 @@ export const SettingsDevelopersWebhookForm = ({
               }) => {
                 return (
                   <TextInput
+                    instanceId={targetUrlTextInputId}
                     placeholder={t`https://example.com/webhook`}
                     value={value}
                     onChange={onChange}
@@ -177,6 +182,7 @@ export const SettingsDevelopersWebhookForm = ({
               control={formConfig.control}
               render={({ field: { onChange, value } }) => (
                 <TextArea
+                  textAreaId={descriptionTextAreaId}
                   placeholder={t`Write a description`}
                   minRows={4}
                   value={value || ''}
@@ -242,6 +248,7 @@ export const SettingsDevelopersWebhookForm = ({
               control={formConfig.control}
               render={({ field: { onChange, value } }) => (
                 <TextInput
+                  instanceId={secretTextInputId}
                   placeholder={t`Secret (optional)`}
                   value={value || ''}
                   onChange={onChange}
diff --git a/packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionForm.tsx b/packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionForm.tsx
index 2063a794c..d24970337 100644
--- a/packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionForm.tsx
+++ b/packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionForm.tsx
@@ -1,5 +1,5 @@
-import { Controller, useFormContext } from 'react-hook-form';
 import styled from '@emotion/styled';
+import { Controller, useFormContext } from 'react-hook-form';
 import { z } from 'zod';
 
 import { TextInput } from '@/ui/input/components/TextInput';
@@ -129,6 +129,7 @@ export const SettingsIntegrationDatabaseConnectionForm = ({
           render={({ field: { onChange, value } }) => {
             return (
               <TextInput
+                instanceId={`${databaseKey}-${name}`}
                 autoComplete="new-password" // Disable autocomplete
                 label={label}
                 value={value}
diff --git a/packages/twenty-front/src/modules/settings/playground/components/PlaygroundSetupForm.tsx b/packages/twenty-front/src/modules/settings/playground/components/PlaygroundSetupForm.tsx
index fe73f591f..c88caae02 100644
--- a/packages/twenty-front/src/modules/settings/playground/components/PlaygroundSetupForm.tsx
+++ b/packages/twenty-front/src/modules/settings/playground/components/PlaygroundSetupForm.tsx
@@ -117,6 +117,7 @@ export const PlaygroundSetupForm = () => {
         control={control}
         render={({ field: { onChange, value }, fieldState: { error } }) => (
           <TextInput
+            instanceId="playground-api-key"
             label={t`API Key`}
             placeholder="Enter your API key"
             value={value}
diff --git a/packages/twenty-front/src/modules/settings/profile/components/EmailField.tsx b/packages/twenty-front/src/modules/settings/profile/components/EmailField.tsx
index 02c1e8734..465f6e003 100644
--- a/packages/twenty-front/src/modules/settings/profile/components/EmailField.tsx
+++ b/packages/twenty-front/src/modules/settings/profile/components/EmailField.tsx
@@ -8,6 +8,7 @@ export const EmailField = () => {
 
   return (
     <TextInput
+      instanceId={`user-email-${currentUser?.id}`}
       value={currentUser?.email}
       disabled
       fullWidth
diff --git a/packages/twenty-front/src/modules/settings/profile/components/NameFields.tsx b/packages/twenty-front/src/modules/settings/profile/components/NameFields.tsx
index 6ae680dc5..60891e34e 100644
--- a/packages/twenty-front/src/modules/settings/profile/components/NameFields.tsx
+++ b/packages/twenty-front/src/modules/settings/profile/components/NameFields.tsx
@@ -1,6 +1,6 @@
+import styled from '@emotion/styled';
 import { useLingui } from '@lingui/react/macro';
 import { useEffect, useState } from 'react';
-import styled from '@emotion/styled';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { useDebouncedCallback } from 'use-debounce';
 
@@ -109,9 +109,13 @@ export const NameFields = ({
     currentWorkspaceMember,
   ]);
 
+  const firstNameTextInputId = `${currentWorkspaceMember?.id}-first-name`;
+  const lastNameTextInputId = `${currentWorkspaceMember?.id}-last-name`;
+
   return (
     <StyledComboInputContainer>
       <TextInput
+        instanceId={firstNameTextInputId}
         label={t`First Name`}
         value={firstName}
         onChange={setFirstName}
@@ -119,6 +123,7 @@ export const NameFields = ({
         fullWidth
       />
       <TextInput
+        instanceId={lastNameTextInputId}
         label={t`Last Name`}
         value={lastName}
         onChange={setLastName}
diff --git a/packages/twenty-front/src/modules/settings/roles/role-assignment/components/SettingsRoleAssignment.tsx b/packages/twenty-front/src/modules/settings/roles/role-assignment/components/SettingsRoleAssignment.tsx
index 7f85ef723..153881b99 100644
--- a/packages/twenty-front/src/modules/settings/roles/role-assignment/components/SettingsRoleAssignment.tsx
+++ b/packages/twenty-front/src/modules/settings/roles/role-assignment/components/SettingsRoleAssignment.tsx
@@ -210,6 +210,7 @@ export const SettingsRoleAssignment = ({
         />
         <StyledSearchContainer>
           <StyledSearchInput
+            instanceId="role-assignment-member-search"
             value={searchFilter}
             onChange={handleSearchChange}
             placeholder={t`Search an assigned team member...`}
diff --git a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/components/SettingsRolePermissionsObjectLevelObjectPicker.tsx b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/components/SettingsRolePermissionsObjectLevelObjectPicker.tsx
index 0c0676fa5..54747d8ff 100644
--- a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/components/SettingsRolePermissionsObjectLevelObjectPicker.tsx
+++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/components/SettingsRolePermissionsObjectLevelObjectPicker.tsx
@@ -125,6 +125,7 @@ export const SettingsRolePermissionsObjectLevelObjectPicker = ({
       <Section>
         <StyledSearchContainer>
           <StyledSearchInput
+            instanceId="role-permissions-object-search"
             value={searchFilter}
             onChange={handleSearchChange}
             placeholder={t`Search an object`}
diff --git a/packages/twenty-front/src/modules/settings/roles/role-settings/components/SettingsRoleSettings.tsx b/packages/twenty-front/src/modules/settings/roles/role-settings/components/SettingsRoleSettings.tsx
index e003a860d..dae7796d3 100644
--- a/packages/twenty-front/src/modules/settings/roles/role-settings/components/SettingsRoleSettings.tsx
+++ b/packages/twenty-front/src/modules/settings/roles/role-settings/components/SettingsRoleSettings.tsx
@@ -42,6 +42,9 @@ export const SettingsRoleSettings = ({
 
   const { openModal } = useModal();
 
+  const descriptionTextAreaId = `${roleId}-description`;
+  const nameTextInputId = `${roleId}-name`;
+
   return (
     <>
       <Section>
@@ -60,6 +63,7 @@ export const SettingsRoleSettings = ({
             />
           </StyledInputContainer>
           <TextInput
+            instanceId={nameTextInputId}
             value={settingsDraftRole.label}
             fullWidth
             onChange={(value: string) => {
@@ -73,6 +77,7 @@ export const SettingsRoleSettings = ({
           />
         </StyledInputsContainer>
         <TextArea
+          textAreaId={descriptionTextAreaId}
           minRows={4}
           placeholder={t`Write a description`}
           value={settingsDraftRole.description || ''}
diff --git a/packages/twenty-front/src/modules/settings/roles/role/components/SettingsRoleLabelContainer.tsx b/packages/twenty-front/src/modules/settings/roles/role/components/SettingsRoleLabelContainer.tsx
index d161fd633..ebd8d3d68 100644
--- a/packages/twenty-front/src/modules/settings/roles/role/components/SettingsRoleLabelContainer.tsx
+++ b/packages/twenty-front/src/modules/settings/roles/role/components/SettingsRoleLabelContainer.tsx
@@ -39,6 +39,7 @@ export const SettingsRoleLabelContainer = ({
   return (
     <StyledHeaderTitle>
       <TitleInput
+        instanceId="role-label-input"
         disabled={!settingsDraftRole.isEditable}
         sizeVariant="md"
         value={settingsDraftRole.label}
diff --git a/packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSSOIdentitiesProvidersForm.tsx b/packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSSOIdentitiesProvidersForm.tsx
index 90994ccb1..f8552f8be 100644
--- a/packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSSOIdentitiesProvidersForm.tsx
+++ b/packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSSOIdentitiesProvidersForm.tsx
@@ -7,12 +7,12 @@ import { SettingsSSOSAMLForm } from '@/settings/security/components/SSO/Settings
 import { SettingSecurityNewSSOIdentityFormValues } from '@/settings/security/types/SSOIdentityProvider';
 import { TextInput } from '@/ui/input/components/TextInput';
 import styled from '@emotion/styled';
+import { t } from '@lingui/core/macro';
 import { ReactElement, useMemo } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
-import { IdentityProviderType } from '~/generated/graphql';
-import { t } from '@lingui/core/macro';
 import { H2Title, IconComponent, IconKey } from 'twenty-ui/display';
 import { Section } from 'twenty-ui/layout';
+import { IdentityProviderType } from '~/generated/graphql';
 
 const StyledInputsContainer = styled.div`
   display: grid;
@@ -88,6 +88,7 @@ export const SettingsSSOIdentitiesProvidersForm = () => {
             control={control}
             render={({ field: { onChange, value } }) => (
               <TextInput
+                instanceId="sso-identity-provider-name"
                 autoComplete="off"
                 label={t`Name`}
                 value={value}
diff --git a/packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSSOOIDCForm.tsx b/packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSSOOIDCForm.tsx
index 883b87231..462cb8625 100644
--- a/packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSSOOIDCForm.tsx
+++ b/packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSSOOIDCForm.tsx
@@ -54,6 +54,7 @@ export const SettingsSSOOIDCForm = () => {
           <StyledContainer>
             <StyledLinkContainer>
               <TextInput
+                instanceId="sso-oidc-authorized-uri"
                 readOnly={true}
                 label={t`Authorized URI`}
                 value={authorizedUrl}
@@ -81,6 +82,7 @@ export const SettingsSSOOIDCForm = () => {
           <StyledContainer>
             <StyledLinkContainer>
               <TextInput
+                instanceId="sso-oidc-redirection-uri"
                 readOnly={true}
                 label={t`Redirection URI`}
                 value={redirectionUrl}
@@ -118,6 +120,7 @@ export const SettingsSSOOIDCForm = () => {
             control={control}
             render={({ field: { onChange, value } }) => (
               <TextInput
+                instanceId="sso-oidc-client-id"
                 autoComplete="off"
                 label={t`Client ID`}
                 value={value}
@@ -132,6 +135,7 @@ export const SettingsSSOOIDCForm = () => {
             control={control}
             render={({ field: { onChange, value } }) => (
               <TextInput
+                instanceId="sso-oidc-client-secret"
                 autoComplete="off"
                 type="password"
                 label={t`Client Secret`}
@@ -147,6 +151,7 @@ export const SettingsSSOOIDCForm = () => {
             control={control}
             render={({ field: { onChange, value } }) => (
               <TextInput
+                instanceId="sso-oidc-issuer"
                 autoComplete="off"
                 label={t`Issuer URI`}
                 value={value}
diff --git a/packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSSOSAMLForm.tsx b/packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSSOSAMLForm.tsx
index b790b0b5c..1547c9f64 100644
--- a/packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSSOSAMLForm.tsx
+++ b/packages/twenty-front/src/modules/settings/security/components/SSO/SettingsSSOSAMLForm.tsx
@@ -169,6 +169,7 @@ export const SettingsSSOSAMLForm = () => {
           <StyledContainer>
             <StyledLinkContainer>
               <TextInput
+                instanceId="sso-saml-acs-url"
                 disabled={true}
                 label="ACS Url"
                 value={acsUrl}
@@ -196,6 +197,7 @@ export const SettingsSSOSAMLForm = () => {
           <StyledContainer>
             <StyledLinkContainer>
               <TextInput
+                instanceId="sso-saml-entity-id"
                 disabled={true}
                 label="Entity ID"
                 value={entityID}
diff --git a/packages/twenty-front/src/modules/settings/serverless-functions/components/SettingsServerlessFunctionNewForm.tsx b/packages/twenty-front/src/modules/settings/serverless-functions/components/SettingsServerlessFunctionNewForm.tsx
index 206165ca2..9c8f1baef 100644
--- a/packages/twenty-front/src/modules/settings/serverless-functions/components/SettingsServerlessFunctionNewForm.tsx
+++ b/packages/twenty-front/src/modules/settings/serverless-functions/components/SettingsServerlessFunctionNewForm.tsx
@@ -18,11 +18,15 @@ export const SettingsServerlessFunctionNewForm = ({
   formValues: ServerlessFunctionNewFormValues;
   onChange: (key: string) => (value: string) => void;
 }) => {
+  const descriptionTextAreaId = `${formValues.name}-description`;
+  const nameTextInputId = `${formValues.name}-name`;
+
   return (
     <Section>
       <H2Title title="About" description="Name and set your function" />
       <StyledInputsContainer>
         <TextInput
+          instanceId={nameTextInputId}
           placeholder="Name"
           fullWidth
           autoFocusOnMount
@@ -30,6 +34,7 @@ export const SettingsServerlessFunctionNewForm = ({
           onChange={onChange('name')}
         />
         <TextArea
+          textAreaId={descriptionTextAreaId}
           placeholder="Description"
           minRows={4}
           value={formValues.description}
diff --git a/packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionTabEnvironmentVariablesSection.tsx b/packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionTabEnvironmentVariablesSection.tsx
index 71e48bd50..79db54b4c 100644
--- a/packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionTabEnvironmentVariablesSection.tsx
+++ b/packages/twenty-front/src/modules/settings/serverless-functions/components/tabs/SettingsServerlessFunctionTabEnvironmentVariablesSection.tsx
@@ -8,11 +8,11 @@ import { TableRow } from '@/ui/layout/table/components/TableRow';
 import styled from '@emotion/styled';
 import dotenv from 'dotenv';
 import { useMemo, useState } from 'react';
-import { v4 } from 'uuid';
-import { Button } from 'twenty-ui/input';
 import { H2Title, IconPlus, IconSearch } from 'twenty-ui/display';
-import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
+import { Button } from 'twenty-ui/input';
 import { Section } from 'twenty-ui/layout';
+import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
+import { v4 } from 'uuid';
 
 const StyledSearchInput = styled(TextInput)`
   padding-bottom: ${({ theme }) => theme.spacing(2)};
@@ -82,6 +82,7 @@ export const SettingsServerlessFunctionTabEnvironmentVariablesSection = ({
         description="Set your function environment variables"
       />
       <StyledSearchInput
+        instanceId="serverless-function-env-var-search"
         LeftIcon={IconSearch}
         placeholder="Search a variable"
         value={searchTerm}
diff --git a/packages/twenty-front/src/modules/settings/workspace/components/NameField.tsx b/packages/twenty-front/src/modules/settings/workspace/components/NameField.tsx
index 27696edb3..444bc5b9b 100644
--- a/packages/twenty-front/src/modules/settings/workspace/components/NameField.tsx
+++ b/packages/twenty-front/src/modules/settings/workspace/components/NameField.tsx
@@ -88,6 +88,7 @@ export const NameField = ({
   return (
     <StyledComboInputContainer>
       <TextInput
+        instanceId="workspace-name"
         label={t`Name`}
         value={displayName}
         onChange={setDisplayName}
diff --git a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/components/columns.tsx b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/components/columns.tsx
index 951ebd6b1..8dc8379cd 100644
--- a/packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/components/columns.tsx
+++ b/packages/twenty-front/src/modules/spreadsheet-import/steps/components/ValidationStep/components/columns.tsx
@@ -148,6 +148,7 @@ export const generateColumns = <T extends string>(
           default:
             component = (
               <TextInput
+                instanceId={`validation-${column.key}-${row.__index}`}
                 value={row[columnKey] as string}
                 onChange={(value: string) => {
                   onRowChange({ ...row, [columnKey]: value });
diff --git a/packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx
index 930fe37dc..1b08b38bf 100644
--- a/packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx
+++ b/packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx
@@ -4,11 +4,11 @@ import { Key } from 'ts-key-enum';
 
 import { FieldAddressDraftValue } from '@/object-record/record-field/types/FieldInputDraftValue';
 import { FieldAddressValue } from '@/object-record/record-field/types/FieldMetadata';
+import { TextInputV2 } from '@/ui/input/components/TextInputV2';
 import { CountrySelect } from '@/ui/input/components/internal/country/components/CountrySelect';
 import { SELECT_COUNTRY_DROPDOWN_ID } from '@/ui/input/components/internal/country/constants/SelectCountryDropdownId';
-import { TextInputV2 } from '@/ui/input/components/TextInputV2';
 import { activeDropdownFocusIdState } from '@/ui/layout/dropdown/states/activeDropdownFocusIdState';
-import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
@@ -47,6 +47,7 @@ const StyledHalfRowContainer = styled.div`
 `;
 
 export type AddressInputProps = {
+  instanceId: string;
   value: FieldAddressValue;
   onTab: (newAddress: FieldAddressDraftValue) => void;
   onShiftTab: (newAddress: FieldAddressDraftValue) => void;
@@ -62,6 +63,7 @@ export type AddressInputProps = {
 };
 
 export const AddressInput = ({
+  instanceId,
   value,
   hotkeyScope,
   onTab,
@@ -106,76 +108,84 @@ export const AddressInput = ({
     inputRefs[fieldName]?.current?.focus();
   };
 
-  useScopedHotkeys(
-    'tab',
-    () => {
-      const currentFocusPosition = Object.keys(inputRefs).findIndex(
-        (key) => key === focusPosition,
-      );
-      const maxFocusPosition = Object.keys(inputRefs).length - 1;
+  const handleTab = () => {
+    const currentFocusPosition = Object.keys(inputRefs).findIndex(
+      (key) => key === focusPosition,
+    );
+    const maxFocusPosition = Object.keys(inputRefs).length - 1;
 
-      const nextFocusPosition = currentFocusPosition + 1;
+    const nextFocusPosition = currentFocusPosition + 1;
 
-      const isFocusPositionAfterLast = nextFocusPosition > maxFocusPosition;
+    const isFocusPositionAfterLast = nextFocusPosition > maxFocusPosition;
 
-      if (isFocusPositionAfterLast) {
-        onTab?.(internalValue);
-      } else {
-        const nextFocusFieldName = Object.keys(inputRefs)[
-          nextFocusPosition
-        ] as keyof FieldAddressDraftValue;
+    if (isFocusPositionAfterLast) {
+      onTab?.(internalValue);
+    } else {
+      const nextFocusFieldName = Object.keys(inputRefs)[
+        nextFocusPosition
+      ] as keyof FieldAddressDraftValue;
 
-        setFocusPosition(nextFocusFieldName);
-        inputRefs[nextFocusFieldName]?.current?.focus();
-      }
-    },
-    hotkeyScope,
-    [onTab, internalValue, focusPosition],
-  );
+      setFocusPosition(nextFocusFieldName);
+      inputRefs[nextFocusFieldName]?.current?.focus();
+    }
+  };
 
-  useScopedHotkeys(
-    'shift+tab',
-    () => {
-      const currentFocusPosition = Object.keys(inputRefs).findIndex(
-        (key) => key === focusPosition,
-      );
+  const handleShiftTab = () => {
+    const currentFocusPosition = Object.keys(inputRefs).findIndex(
+      (key) => key === focusPosition,
+    );
 
-      const nextFocusPosition = currentFocusPosition - 1;
+    const nextFocusPosition = currentFocusPosition - 1;
 
-      const isFocusPositionBeforeFirst = nextFocusPosition < 0;
+    const isFocusPositionBeforeFirst = nextFocusPosition < 0;
 
-      if (isFocusPositionBeforeFirst) {
-        onShiftTab?.(internalValue);
-      } else {
-        const nextFocusFieldName = Object.keys(inputRefs)[
-          nextFocusPosition
-        ] as keyof FieldAddressDraftValue;
+    if (isFocusPositionBeforeFirst) {
+      onShiftTab?.(internalValue);
+    } else {
+      const nextFocusFieldName = Object.keys(inputRefs)[
+        nextFocusPosition
+      ] as keyof FieldAddressDraftValue;
 
-        setFocusPosition(nextFocusFieldName);
-        inputRefs[nextFocusFieldName]?.current?.focus();
-      }
-    },
-    hotkeyScope,
-    [onTab, internalValue, focusPosition],
-  );
+      setFocusPosition(nextFocusFieldName);
+      inputRefs[nextFocusFieldName]?.current?.focus();
+    }
+  };
 
-  useScopedHotkeys(
-    Key.Enter,
-    () => {
+  useHotkeysOnFocusedElement({
+    keys: ['tab'],
+    callback: handleTab,
+    scope: hotkeyScope,
+    focusId: instanceId,
+    dependencies: [handleTab],
+  });
+
+  useHotkeysOnFocusedElement({
+    keys: ['shift+tab'],
+    callback: handleShiftTab,
+    scope: hotkeyScope,
+    focusId: instanceId,
+    dependencies: [handleShiftTab],
+  });
+
+  useHotkeysOnFocusedElement({
+    keys: [Key.Enter],
+    callback: () => {
       onEnter(internalValue);
     },
-    hotkeyScope,
-    [onEnter, internalValue],
-  );
+    scope: hotkeyScope,
+    focusId: instanceId,
+    dependencies: [onEnter, internalValue],
+  });
 
-  useScopedHotkeys(
-    [Key.Escape],
-    () => {
+  useHotkeysOnFocusedElement({
+    keys: [Key.Escape],
+    callback: () => {
       onEscape(internalValue);
     },
-    hotkeyScope,
-    [onEscape, internalValue],
-  );
+    scope: hotkeyScope,
+    focusId: instanceId,
+    dependencies: [onEscape, internalValue],
+  });
 
   const activeDropdownFocusId = useRecoilValue(activeDropdownFocusIdState);
 
diff --git a/packages/twenty-front/src/modules/ui/field/input/components/CurrencyInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/CurrencyInput.tsx
index cdebc1c8e..38fccc33b 100644
--- a/packages/twenty-front/src/modules/ui/field/input/components/CurrencyInput.tsx
+++ b/packages/twenty-front/src/modules/ui/field/input/components/CurrencyInput.tsx
@@ -37,6 +37,7 @@ const StyledIcon = styled.div`
 `;
 
 export type CurrencyInputProps = {
+  instanceId: string;
   placeholder?: string;
   autoFocus?: boolean;
   value: string;
@@ -52,6 +53,7 @@ export type CurrencyInputProps = {
 };
 
 export const CurrencyInput = ({
+  instanceId,
   autoFocus,
   value,
   currencyCode,
@@ -81,6 +83,7 @@ export const CurrencyInput = ({
   };
 
   useRegisterInputEvents({
+    focusId: instanceId,
     inputRef: wrapperRef,
     inputValue: internalText,
     onEnter,
diff --git a/packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx
index f1e4718ef..123ea1ddb 100644
--- a/packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx
+++ b/packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx
@@ -13,6 +13,7 @@ import { useRecoilCallback } from 'recoil';
 import { Nullable } from 'twenty-ui/utilities';
 
 export type DateInputProps = {
+  instanceId: string;
   value: Nullable<Date>;
   onEnter: (newDate: Nullable<Date>) => void;
   onEscape: (newDate: Nullable<Date>) => void;
@@ -30,6 +31,7 @@ export type DateInputProps = {
 };
 
 export const DateInput = ({
+  instanceId,
   value,
   onEnter,
   onEscape,
@@ -102,6 +104,7 @@ export const DateInput = ({
   );
 
   useRegisterInputEvents({
+    focusId: instanceId,
     inputRef: wrapperRef,
     inputValue: internalValue,
     onEnter: handleEnter,
diff --git a/packages/twenty-front/src/modules/ui/field/input/components/DoubleTextInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/DoubleTextInput.tsx
index 866be0646..e500afb85 100644
--- a/packages/twenty-front/src/modules/ui/field/input/components/DoubleTextInput.tsx
+++ b/packages/twenty-front/src/modules/ui/field/input/components/DoubleTextInput.tsx
@@ -9,14 +9,14 @@ import {
 import { Key } from 'ts-key-enum';
 
 import { FieldDoubleText } from '@/object-record/record-field/types/FieldDoubleText';
-import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 
 import { FieldInputContainer } from '@/ui/field/input/components/FieldInputContainer';
+import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
+import { isDefined } from 'twenty-shared/utils';
 import { splitFullName } from '~/utils/format/spiltFullName';
 import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
 import { StyledTextInput } from './TextInput';
-import { isDefined } from 'twenty-shared/utils';
 
 const StyledContainer = styled.div`
   display: flex;
@@ -29,6 +29,7 @@ const StyledContainer = styled.div`
 `;
 
 type DoubleTextInputProps = {
+  instanceId: string;
   firstValue: string;
   secondValue: string;
   firstValuePlaceholder: string;
@@ -47,6 +48,7 @@ type DoubleTextInputProps = {
 };
 
 export const DoubleTextInput = ({
+  instanceId,
   firstValue,
   secondValue,
   firstValuePlaceholder,
@@ -87,33 +89,35 @@ export const DoubleTextInput = ({
 
   const [focusPosition, setFocusPosition] = useState<'left' | 'right'>('left');
 
-  useScopedHotkeys(
-    Key.Enter,
-    () => {
+  useHotkeysOnFocusedElement({
+    keys: [Key.Enter],
+    callback: () => {
       onEnter({
         firstValue: firstInternalValue,
         secondValue: secondInternalValue,
       });
     },
-    hotkeyScope,
-    [onEnter, firstInternalValue, secondInternalValue],
-  );
+    scope: hotkeyScope,
+    focusId: instanceId,
+    dependencies: [onEnter, firstInternalValue, secondInternalValue],
+  });
 
-  useScopedHotkeys(
-    [Key.Escape],
-    () => {
+  useHotkeysOnFocusedElement({
+    keys: [Key.Escape],
+    callback: () => {
       onEscape({
         firstValue: firstInternalValue,
         secondValue: secondInternalValue,
       });
     },
-    hotkeyScope,
-    [onEscape, firstInternalValue, secondInternalValue],
-  );
+    scope: hotkeyScope,
+    focusId: instanceId,
+    dependencies: [onEscape, firstInternalValue, secondInternalValue],
+  });
 
-  useScopedHotkeys(
-    'tab',
-    () => {
+  useHotkeysOnFocusedElement({
+    keys: ['tab'],
+    callback: () => {
       if (focusPosition === 'left') {
         setFocusPosition('right');
         secondValueInputRef.current?.focus();
@@ -124,13 +128,19 @@ export const DoubleTextInput = ({
         });
       }
     },
-    hotkeyScope,
-    [onTab, firstInternalValue, secondInternalValue, focusPosition],
-  );
+    scope: hotkeyScope,
+    focusId: instanceId,
+    dependencies: [
+      onTab,
+      firstInternalValue,
+      secondInternalValue,
+      focusPosition,
+    ],
+  });
 
-  useScopedHotkeys(
-    'shift+tab',
-    () => {
+  useHotkeysOnFocusedElement({
+    keys: ['shift+tab'],
+    callback: () => {
       if (focusPosition === 'right') {
         setFocusPosition('left');
         firstValueInputRef.current?.focus();
@@ -141,9 +151,15 @@ export const DoubleTextInput = ({
         });
       }
     },
-    hotkeyScope,
-    [onShiftTab, firstInternalValue, secondInternalValue, focusPosition],
-  );
+    scope: hotkeyScope,
+    focusId: instanceId,
+    dependencies: [
+      onShiftTab,
+      firstInternalValue,
+      secondInternalValue,
+      focusPosition,
+    ],
+  });
 
   useListenClickOutside({
     refs: [containerRef],
diff --git a/packages/twenty-front/src/modules/ui/field/input/components/TextAreaInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/TextAreaInput.tsx
index 703545a16..83d6a366f 100644
--- a/packages/twenty-front/src/modules/ui/field/input/components/TextAreaInput.tsx
+++ b/packages/twenty-front/src/modules/ui/field/input/components/TextAreaInput.tsx
@@ -4,11 +4,12 @@ import TextareaAutosize from 'react-textarea-autosize';
 
 import { LightCopyIconButton } from '@/object-record/record-field/components/LightCopyIconButton';
 import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
-import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
 import { isDefined } from 'twenty-shared/utils';
 import { TEXT_INPUT_STYLE } from 'twenty-ui/theme';
+import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
 
 export type TextAreaInputProps = {
+  instanceId: string;
   disabled?: boolean;
   className?: string;
   placeholder?: string;
@@ -46,6 +47,7 @@ const StyledLightIconButtonContainer = styled.div`
 `;
 
 export const TextAreaInput = ({
+  instanceId,
   disabled,
   className,
   placeholder,
@@ -83,6 +85,7 @@ export const TextAreaInput = ({
   }, []);
 
   useRegisterInputEvents({
+    focusId: instanceId,
     inputRef: wrapperRef,
     copyRef: copyRef,
     inputValue: internalText,
diff --git a/packages/twenty-front/src/modules/ui/field/input/components/TextInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/TextInput.tsx
index 9e576416a..3a37f9e35 100644
--- a/packages/twenty-front/src/modules/ui/field/input/components/TextInput.tsx
+++ b/packages/twenty-front/src/modules/ui/field/input/components/TextInput.tsx
@@ -16,7 +16,7 @@ export const StyledTextInput = styled.input`
 `;
 
 type TextInputProps = {
-  inputId?: string;
+  instanceId: string;
   placeholder?: string;
   autoFocus?: boolean;
   value: string;
@@ -41,7 +41,7 @@ const getValue = (value: string, shouldTrim: boolean) => {
 };
 
 export const TextInput = ({
-  inputId,
+  instanceId,
   placeholder,
   autoFocus,
   value,
@@ -70,6 +70,7 @@ export const TextInput = ({
   }, [value, shouldTrim]);
 
   useRegisterInputEvents({
+    focusId: instanceId,
     inputRef: wrapperRef,
     copyRef: copyRef,
     inputValue: internalText,
@@ -84,7 +85,7 @@ export const TextInput = ({
   return (
     <>
       <StyledTextInput
-        id={inputId}
+        id={instanceId}
         autoComplete="off"
         ref={wrapperRef}
         placeholder={placeholder}
diff --git a/packages/twenty-front/src/modules/ui/field/input/components/__stories__/MultiSelectInput.stories.tsx b/packages/twenty-front/src/modules/ui/field/input/components/__stories__/MultiSelectInput.stories.tsx
index e6f7b19b4..85dee5f99 100644
--- a/packages/twenty-front/src/modules/ui/field/input/components/__stories__/MultiSelectInput.stories.tsx
+++ b/packages/twenty-front/src/modules/ui/field/input/components/__stories__/MultiSelectInput.stories.tsx
@@ -1,7 +1,7 @@
 import { FieldMultiSelectValue } from '@/object-record/record-field/types/FieldMetadata';
-import { getFieldInputInstanceId } from '@/object-record/record-field/utils/getFieldInputInstanceId';
 import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
 import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope';
+import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId';
 import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
 import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
 import { expect } from '@storybook/jest';
@@ -97,17 +97,19 @@ const Render = ({
       focusId: TableHotkeyScope.CellEditMode,
       component: {
         type: FocusComponentType.DROPDOWN,
-        instanceId: getFieldInputInstanceId({
+        instanceId: getRecordFieldInputInstanceId({
           recordId: '123',
           fieldName: 'Relation',
+          prefix: 'multi-select-story',
         }),
       },
       hotkeyScope: {
         scope: TableHotkeyScope.CellEditMode,
       },
-      memoizeKey: getFieldInputInstanceId({
+      memoizeKey: getRecordFieldInputInstanceId({
         recordId: '123',
         fieldName: 'Relation',
+        prefix: 'multi-select-story',
       }),
     });
   }, [pushFocusItemToFocusStack]);
diff --git a/packages/twenty-front/src/modules/ui/input/components/AutosizeTextInput.tsx b/packages/twenty-front/src/modules/ui/input/components/AutosizeTextInput.tsx
deleted file mode 100644
index 46b9afd86..000000000
--- a/packages/twenty-front/src/modules/ui/input/components/AutosizeTextInput.tsx
+++ /dev/null
@@ -1,271 +0,0 @@
-import styled from '@emotion/styled';
-import { useRef, useState } from 'react';
-import { HotkeysEvent } from 'react-hotkeys-hook/dist/types';
-import TextareaAutosize from 'react-textarea-autosize';
-import { Key } from 'ts-key-enum';
-
-import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
-import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
-
-import { IconArrowRight } from 'twenty-ui/display';
-import { Button, RoundedIconButton } from 'twenty-ui/input';
-import { InputHotkeyScope } from '../types/InputHotkeyScope';
-
-const MAX_ROWS = 5;
-
-export enum AutosizeTextInputVariant {
-  Default = 'default',
-  Icon = 'icon',
-  Button = 'button',
-}
-
-type AutosizeTextInputProps = {
-  onValidate?: (text: string) => void;
-  minRows?: number;
-  placeholder?: string;
-  onFocus?: () => void;
-  variant?: AutosizeTextInputVariant;
-  buttonTitle?: string;
-  value?: string;
-  className?: string;
-  onBlur?: () => void;
-  autoFocus?: boolean;
-  disabled?: boolean;
-};
-
-const StyledContainer = styled.div`
-  width: 100%;
-`;
-
-const StyledInputContainer = styled.div`
-  display: flex;
-  position: relative;
-  width: 100%;
-`;
-
-type StyledTextAreaProps = {
-  variant: AutosizeTextInputVariant;
-};
-
-const StyledTextArea = styled(TextareaAutosize)<StyledTextAreaProps>`
-  background: ${({ theme, variant }) =>
-    variant === AutosizeTextInputVariant.Button
-      ? 'transparent'
-      : theme.background.tertiary};
-  border: none;
-  border-radius: 5px;
-  color: ${({ theme }) => theme.font.color.primary};
-  font-family: inherit;
-  font-size: ${({ theme }) => theme.font.size.md};
-  font-weight: ${({ theme }) => theme.font.weight.regular};
-  line-height: 16px;
-  overflow: auto;
-
-  &:focus {
-    border: none;
-    outline: none;
-  }
-
-  &::placeholder {
-    color: ${({ theme }) => theme.font.color.light};
-    font-weight: ${({ theme }) => theme.font.weight.regular};
-  }
-  padding: ${({ variant }) =>
-    variant === AutosizeTextInputVariant.Button ? '8px 0' : '8px'};
-  resize: none;
-  width: 100%;
-`;
-
-// TODO: this messes with the layout, fix it
-const StyledBottomRightRoundedIconButton = styled.div`
-  height: 0;
-  position: relative;
-  right: 26px;
-  top: 6px;
-  width: 0px;
-`;
-
-const StyledSendButton = styled(Button)`
-  margin-left: ${({ theme }) => theme.spacing(2)};
-`;
-
-const StyledWordCounter = styled.div`
-  color: ${({ theme }) => theme.font.color.light};
-  font-weight: ${({ theme }) => theme.font.weight.medium};
-  line-height: 150%;
-  width: 100%;
-`;
-
-type StyledBottomContainerProps = {
-  isTextAreaHidden: boolean;
-};
-
-const StyledBottomContainer = styled.div<StyledBottomContainerProps>`
-  align-items: center;
-  display: flex;
-  justify-content: space-between;
-  margin-top: ${({ theme, isTextAreaHidden }) =>
-    isTextAreaHidden ? 0 : theme.spacing(4)};
-`;
-
-const StyledCommentText = styled.div`
-  cursor: text;
-  padding-bottom: ${({ theme }) => theme.spacing(1)};
-  padding-top: ${({ theme }) => theme.spacing(1)};
-`;
-
-export const AutosizeTextInput = ({
-  placeholder,
-  onValidate,
-  minRows = 1,
-  onFocus,
-  variant = AutosizeTextInputVariant.Default,
-  buttonTitle,
-  value = '',
-  className,
-  onBlur,
-  autoFocus,
-  disabled,
-}: AutosizeTextInputProps) => {
-  const [isFocused, setIsFocused] = useState(false);
-  const [isHidden, setIsHidden] = useState(
-    variant === AutosizeTextInputVariant.Button,
-  );
-  const [text, setText] = useState(value);
-  const textInputRef = useRef<HTMLTextAreaElement>(null);
-  const {
-    setHotkeyScopeAndMemorizePreviousScope,
-    goBackToPreviousHotkeyScope,
-  } = usePreviousHotkeyScope();
-  const isSendButtonDisabled = !text;
-  const words = text.split(/\s|\n/).filter((word) => word).length;
-
-  useScopedHotkeys(
-    ['shift+enter', 'enter'],
-    (event: KeyboardEvent, handler: HotkeysEvent) => {
-      if (handler.shift || !isFocused) {
-        return;
-      } else {
-        event.preventDefault();
-
-        onValidate?.(text);
-
-        setText('');
-      }
-    },
-    InputHotkeyScope.TextInput,
-    [onValidate, text, setText, isFocused],
-    {
-      enableOnContentEditable: true,
-      enableOnFormTags: true,
-    },
-  );
-
-  useScopedHotkeys(
-    Key.Escape,
-    (event: KeyboardEvent) => {
-      if (!isFocused) {
-        return;
-      }
-
-      event.preventDefault();
-
-      setText('');
-      goBackToPreviousHotkeyScope();
-      textInputRef.current?.blur();
-    },
-    InputHotkeyScope.TextInput,
-    [onValidate, setText, isFocused],
-    {
-      enableOnContentEditable: true,
-      enableOnFormTags: true,
-    },
-  );
-
-  const handleInputChange = (event: React.FormEvent<HTMLTextAreaElement>) => {
-    const newText = event.currentTarget.value;
-
-    setText(newText);
-  };
-
-  const handleOnClickSendButton = () => {
-    onValidate?.(text);
-
-    setText('');
-  };
-
-  const handleFocus = () => {
-    onFocus?.();
-    setIsFocused(true);
-    setHotkeyScopeAndMemorizePreviousScope({
-      scope: InputHotkeyScope.TextInput,
-    });
-  };
-
-  const handleBlur = () => {
-    onBlur?.();
-    setIsFocused(false);
-    goBackToPreviousHotkeyScope();
-  };
-
-  const computedMinRows = minRows > MAX_ROWS ? MAX_ROWS : minRows;
-
-  return (
-    <>
-      <StyledContainer className={className}>
-        <StyledInputContainer>
-          {!isHidden && (
-            <StyledTextArea
-              ref={textInputRef}
-              autoFocus={
-                autoFocus || variant === AutosizeTextInputVariant.Button
-              }
-              placeholder={placeholder ?? 'Write a comment'}
-              maxRows={MAX_ROWS}
-              minRows={computedMinRows}
-              onChange={handleInputChange}
-              value={text}
-              onFocus={handleFocus}
-              onBlur={handleBlur}
-              variant={variant}
-              disabled={disabled}
-            />
-          )}
-          {variant === AutosizeTextInputVariant.Icon && (
-            <StyledBottomRightRoundedIconButton>
-              <RoundedIconButton
-                onClick={handleOnClickSendButton}
-                Icon={IconArrowRight}
-                disabled={isSendButtonDisabled}
-              />
-            </StyledBottomRightRoundedIconButton>
-          )}
-        </StyledInputContainer>
-
-        {variant === AutosizeTextInputVariant.Button && (
-          <StyledBottomContainer isTextAreaHidden={isHidden}>
-            <StyledWordCounter>
-              {isHidden ? (
-                <StyledCommentText
-                  onClick={() => {
-                    setIsHidden(false);
-                    onFocus?.();
-                  }}
-                >
-                  Write a comment
-                </StyledCommentText>
-              ) : (
-                `${words} word${words === 1 ? '' : 's'}`
-              )}
-            </StyledWordCounter>
-            <StyledSendButton
-              title={buttonTitle ?? 'Comment'}
-              disabled={isSendButtonDisabled}
-              onClick={handleOnClickSendButton}
-            />
-          </StyledBottomContainer>
-        )}
-      </StyledContainer>
-    </>
-  );
-};
diff --git a/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx b/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx
index 8c331bfd8..53bdecd9c 100644
--- a/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx
@@ -6,7 +6,6 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
 import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
-import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
 import { arrayToChunks } from '~/utils/array/arrayToChunks';
 
 import { ICON_PICKER_DROPDOWN_CONTENT_WIDTH } from '@/ui/input/components/constants/IconPickerDropdownContentWidth';
@@ -14,7 +13,7 @@ import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent
 import { DropdownHotkeyScope } from '@/ui/layout/dropdown/constants/DropdownHotkeyScope';
 import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { DropdownOffset } from '@/ui/layout/dropdown/types/DropdownOffset';
-import { useSelectableListListenToEnterHotkeyOnItem } from '@/ui/layout/selectable-list/hooks/useSelectableListListenToEnterHotkeyOnItem';
+import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
 import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { t } from '@lingui/core/macro';
@@ -25,7 +24,6 @@ import {
   IconButtonVariant,
   LightIconButton,
 } from 'twenty-ui/input';
-import { IconPickerHotkeyScope } from '../types/IconPickerHotkeyScope';
 
 export type IconPickerProps = {
   disabled?: boolean;
@@ -51,9 +49,16 @@ const StyledMenuIconItemsContainer = styled.div`
   gap: ${({ theme }) => theme.spacing(0.5)};
 `;
 
-const StyledLightIconButton = styled(LightIconButton)<{ isSelected?: boolean }>`
-  background: ${({ theme, isSelected }) =>
-    isSelected ? theme.background.transparent.medium : 'transparent'};
+const StyledLightIconButton = styled(LightIconButton)<{
+  isSelected?: boolean;
+  isFocused?: boolean;
+}>`
+  background: ${({ theme, isSelected, isFocused }) =>
+    isSelected
+      ? theme.background.transparent.medium
+      : isFocused
+        ? theme.background.transparent.light
+        : 'transparent'};
 `;
 
 const convertIconKeyToLabel = (iconKey: string) =>
@@ -64,6 +69,7 @@ type IconPickerIconProps = {
   onClick: () => void;
   selectedIconKey?: string;
   Icon: IconComponent;
+  focusedIconKey?: string;
 };
 
 const IconPickerIcon = ({
@@ -71,29 +77,26 @@ const IconPickerIcon = ({
   onClick,
   selectedIconKey,
   Icon,
+  focusedIconKey,
 }: IconPickerIconProps) => {
   const isSelectedItemId = useRecoilComponentValueV2(
     selectedItemIdComponentState,
     iconKey,
   );
 
-  useSelectableListListenToEnterHotkeyOnItem({
-    focusId: iconKey,
-    itemId: iconKey,
-    onEnter: onClick,
-    hotkeyScope: DropdownHotkeyScope.Dropdown,
-  });
-
   return (
-    <StyledLightIconButton
-      key={iconKey}
-      aria-label={convertIconKeyToLabel(iconKey)}
-      size="medium"
-      title={iconKey}
-      isSelected={iconKey === selectedIconKey || !!isSelectedItemId}
-      Icon={Icon}
-      onClick={onClick}
-    />
+    <SelectableListItem itemId={iconKey} onEnter={onClick}>
+      <StyledLightIconButton
+        key={iconKey}
+        aria-label={convertIconKeyToLabel(iconKey)}
+        size="medium"
+        title={iconKey}
+        isSelected={iconKey === selectedIconKey || !!isSelectedItemId}
+        isFocused={iconKey === focusedIconKey}
+        Icon={Icon}
+        onClick={onClick}
+      />
+    </SelectableListItem>
   );
 };
 
@@ -114,26 +117,18 @@ export const IconPicker = ({
   maxIconsVisible = 25,
 }: IconPickerProps) => {
   const [searchString, setSearchString] = useState('');
-  const {
-    goBackToPreviousHotkeyScope,
-    setHotkeyScopeAndMemorizePreviousScope,
-  } = usePreviousHotkeyScope();
 
   const [isMouseInsideIconList, setIsMouseInsideIconList] = useState(false);
 
   const handleMouseEnter = () => {
     if (!isMouseInsideIconList) {
       setIsMouseInsideIconList(true);
-      setHotkeyScopeAndMemorizePreviousScope({
-        scope: IconPickerHotkeyScope.IconPicker,
-      });
     }
   };
 
   const handleMouseLeave = () => {
     if (isMouseInsideIconList) {
       setIsMouseInsideIconList(false);
-      goBackToPreviousHotkeyScope();
     }
   };
 
@@ -192,6 +187,14 @@ export const IconPicker = ({
 
   const icon = selectedIconKey ? getIcon(selectedIconKey) : IconApps;
 
+  const selectableListInstanceId = 'icon-list';
+
+  const focusedIconKey =
+    useRecoilComponentValueV2(
+      selectedItemIdComponentState,
+      selectableListInstanceId,
+    ) ?? undefined;
+
   return (
     <div className={className}>
       <Dropdown
@@ -217,7 +220,7 @@ export const IconPicker = ({
             widthInPixels={dropdownWidth || ICON_PICKER_DROPDOWN_CONTENT_WIDTH}
           >
             <SelectableList
-              selectableListInstanceId="icon-list"
+              selectableListInstanceId={selectableListInstanceId}
               selectableItemIdMatrix={iconKeys2d}
               focusId={dropdownId}
               hotkeyScope={DropdownHotkeyScope.Dropdown}
@@ -246,6 +249,7 @@ export const IconPicker = ({
                         }}
                         selectedIconKey={selectedIconKey}
                         Icon={getIcon(iconKey)}
+                        focusedIconKey={focusedIconKey}
                       />
                     ))}
                   </StyledMenuIconItemsContainer>
diff --git a/packages/twenty-front/src/modules/ui/input/components/TextArea.tsx b/packages/twenty-front/src/modules/ui/input/components/TextArea.tsx
index e2af0665b..8773b12ca 100644
--- a/packages/twenty-front/src/modules/ui/input/components/TextArea.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/TextArea.tsx
@@ -2,14 +2,17 @@ import styled from '@emotion/styled';
 import { FocusEventHandler, useId } from 'react';
 import TextareaAutosize from 'react-textarea-autosize';
 
-import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
+import { InputHotkeyScope } from '@/ui/input/types/InputHotkeyScope';
+import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
+import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks/useRemoveFocusItemFromFocusStackById';
+import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
 import { RGBA } from 'twenty-ui/theme';
 import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
-import { InputHotkeyScope } from '../types/InputHotkeyScope';
 
 const MAX_ROWS = 5;
 
 export type TextAreaProps = {
+  textAreaId: string;
   label?: string;
   disabled?: boolean;
   minRows?: number;
@@ -69,6 +72,7 @@ const StyledTextArea = styled(TextareaAutosize)`
 `;
 
 export const TextArea = ({
+  textAreaId,
   label,
   disabled,
   placeholder,
@@ -81,30 +85,37 @@ export const TextArea = ({
 }: TextAreaProps) => {
   const computedMinRows = Math.min(minRows, maxRows);
 
-  const inputId = useId();
+  const instanceId = useId();
 
-  const {
-    goBackToPreviousHotkeyScope,
-    setHotkeyScopeAndMemorizePreviousScope,
-  } = usePreviousHotkeyScope();
+  const { pushFocusItemToFocusStack } = usePushFocusItemToFocusStack();
+  const { removeFocusItemFromFocusStackById } =
+    useRemoveFocusItemFromFocusStackById();
 
   const handleFocus: FocusEventHandler<HTMLTextAreaElement> = () => {
-    setHotkeyScopeAndMemorizePreviousScope({
-      scope: InputHotkeyScope.TextInput,
+    pushFocusItemToFocusStack({
+      focusId: textAreaId,
+      component: {
+        type: FocusComponentType.TEXT_AREA,
+        instanceId: textAreaId,
+      },
+      globalHotkeysConfig: {
+        enableGlobalHotkeysConflictingWithKeyboard: false,
+      },
+      hotkeyScope: { scope: InputHotkeyScope.TextInput },
     });
   };
 
   const handleBlur: FocusEventHandler<HTMLTextAreaElement> = () => {
-    goBackToPreviousHotkeyScope();
+    removeFocusItemFromFocusStackById({ focusId: textAreaId });
     onBlur?.();
   };
 
   return (
     <StyledContainer>
-      {label && <StyledLabel htmlFor={inputId}>{label}</StyledLabel>}
+      {label && <StyledLabel htmlFor={instanceId}>{label}</StyledLabel>}
 
       <StyledTextArea
-        id={inputId}
+        id={instanceId}
         placeholder={placeholder}
         maxRows={maxRows}
         minRows={computedMinRows}
diff --git a/packages/twenty-front/src/modules/ui/input/components/TextInput.tsx b/packages/twenty-front/src/modules/ui/input/components/TextInput.tsx
index d9b1e298c..72acd8182 100644
--- a/packages/twenty-front/src/modules/ui/input/components/TextInput.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/TextInput.tsx
@@ -6,11 +6,14 @@ import {
   TextInputV2ComponentProps,
 } from '@/ui/input/components/TextInputV2';
 import { InputHotkeyScope } from '@/ui/input/types/InputHotkeyScope';
-import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
-import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
+import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks/useRemoveFocusItemFromFocusStackById';
+import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
+import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
 import { isDefined } from 'twenty-shared/utils';
 
 export type TextInputProps = TextInputV2ComponentProps & {
+  instanceId: string;
   disableHotkeys?: boolean;
   onInputEnter?: () => void;
   dataTestId?: string;
@@ -19,6 +22,7 @@ export type TextInputProps = TextInputV2ComponentProps & {
 };
 
 export const TextInput = ({
+  instanceId,
   onFocus,
   onBlur,
   onInputEnter,
@@ -45,18 +49,25 @@ export const TextInput = ({
     }
   }, [autoSelectOnMount]);
 
-  const {
-    goBackToPreviousHotkeyScope,
-    setHotkeyScopeAndMemorizePreviousScope,
-  } = usePreviousHotkeyScope();
+  const { pushFocusItemToFocusStack } = usePushFocusItemToFocusStack();
+  const { removeFocusItemFromFocusStackById } =
+    useRemoveFocusItemFromFocusStackById();
 
   const handleFocus: FocusEventHandler<HTMLInputElement> = (e) => {
     onFocus?.(e);
     setIsFocused(true);
 
     if (!disableHotkeys) {
-      setHotkeyScopeAndMemorizePreviousScope({
-        scope: InputHotkeyScope.TextInput,
+      pushFocusItemToFocusStack({
+        focusId: instanceId,
+        component: {
+          type: FocusComponentType.TEXT_INPUT,
+          instanceId: instanceId,
+        },
+        globalHotkeysConfig: {
+          enableGlobalHotkeysConflictingWithKeyboard: false,
+        },
+        hotkeyScope: { scope: InputHotkeyScope.TextInput },
       });
     }
   };
@@ -66,48 +77,51 @@ export const TextInput = ({
     setIsFocused(false);
 
     if (!disableHotkeys) {
-      goBackToPreviousHotkeyScope();
+      removeFocusItemFromFocusStackById({ focusId: instanceId });
     }
   };
 
-  useScopedHotkeys(
-    [Key.Escape],
-    () => {
-      if (!isFocused) {
-        return;
-      }
+  const handleEscape = () => {
+    if (!isFocused) {
+      return;
+    }
+    if (isDefined(inputRef) && 'current' in inputRef) {
+      inputRef.current?.blur();
+      setIsFocused(false);
+    }
+  };
 
-      if (isDefined(inputRef) && 'current' in inputRef) {
-        inputRef.current?.blur();
-        setIsFocused(false);
-      }
-    },
-    InputHotkeyScope.TextInput,
-    [inputRef, isFocused],
-    {
+  const handleEnter = () => {
+    if (!isFocused) {
+      return;
+    }
+    onInputEnter?.();
+    if (isDefined(inputRef) && 'current' in inputRef) {
+      setIsFocused(false);
+    }
+  };
+
+  useHotkeysOnFocusedElement({
+    keys: [Key.Escape],
+    callback: handleEscape,
+    focusId: instanceId,
+    scope: InputHotkeyScope.TextInput,
+    dependencies: [handleEscape],
+    options: {
       preventDefault: false,
     },
-  );
+  });
 
-  useScopedHotkeys(
-    [Key.Enter],
-    () => {
-      if (!isFocused) {
-        return;
-      }
-
-      onInputEnter?.();
-
-      if (isDefined(inputRef) && 'current' in inputRef) {
-        setIsFocused(false);
-      }
-    },
-    InputHotkeyScope.TextInput,
-    [inputRef, isFocused, onInputEnter],
-    {
+  useHotkeysOnFocusedElement({
+    keys: [Key.Enter],
+    callback: handleEnter,
+    focusId: instanceId,
+    scope: InputHotkeyScope.TextInput,
+    dependencies: [handleEnter],
+    options: {
       preventDefault: false,
     },
-  );
+  });
 
   return (
     <TextInputV2
diff --git a/packages/twenty-front/src/modules/ui/input/components/TextInputV2.tsx b/packages/twenty-front/src/modules/ui/input/components/TextInputV2.tsx
index 9bfaa4fc4..1b9e8205e 100644
--- a/packages/twenty-front/src/modules/ui/input/components/TextInputV2.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/TextInputV2.tsx
@@ -11,10 +11,10 @@ import {
   useRef,
   useState,
 } from 'react';
+import { IconComponent, IconEye, IconEyeOff } from 'twenty-ui/display';
+import { AutogrowWrapper } from 'twenty-ui/utilities';
 import { useCombinedRefs } from '~/hooks/useCombinedRefs';
 import { turnIntoEmptyStringIfWhitespacesOnly } from '~/utils/string/turnIntoEmptyStringIfWhitespacesOnly';
-import { AutogrowWrapper } from 'twenty-ui/utilities';
-import { IconComponent, IconEye, IconEyeOff } from 'twenty-ui/display';
 
 const StyledContainer = styled.div<
   Pick<TextInputV2ComponentProps, 'fullWidth'>
@@ -297,12 +297,12 @@ const TextInputV2Component = forwardRef<
       onBlur?.(event);
     };
 
-    const inputId = useId();
+    const instanceId = useId();
 
     return (
       <StyledContainer className={className} fullWidth={fullWidth ?? false}>
         {label && (
-          <InputLabel htmlFor={inputId}>
+          <InputLabel htmlFor={instanceId}>
             {label + (required ? '*' : '')}
           </InputLabel>
         )}
@@ -322,7 +322,7 @@ const TextInputV2Component = forwardRef<
           )}
 
           <StyledInput
-            id={inputId}
+            id={instanceId}
             width={width}
             data-testid={dataTestId}
             autoComplete={autoComplete || 'off'}
diff --git a/packages/twenty-front/src/modules/ui/input/components/TitleInput.tsx b/packages/twenty-front/src/modules/ui/input/components/TitleInput.tsx
index c6c544f6d..0c5ddbed0 100644
--- a/packages/twenty-front/src/modules/ui/input/components/TitleInput.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/TitleInput.tsx
@@ -6,11 +6,14 @@ import { useRef, useState } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 
 import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
-import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
+import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
+import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks/useRemoveFocusItemFromFocusStackById';
+import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
 import styled from '@emotion/styled';
 import { OverflowingTextWithTooltip } from 'twenty-ui/display';
 
 type InputProps = {
+  instanceId: string;
   value?: string;
   onChange: (value: string) => void;
   placeholder?: string;
@@ -56,6 +59,7 @@ const StyledDiv = styled.div<{
 `;
 
 const Input = ({
+  instanceId,
   value,
   onChange,
   placeholder,
@@ -78,14 +82,16 @@ const Input = ({
     }
   };
 
-  const { goBackToPreviousHotkeyScope } = usePreviousHotkeyScope();
+  const { removeFocusItemFromFocusStackById } =
+    useRemoveFocusItemFromFocusStackById();
 
   const handleLeaveFocus = () => {
     setIsOpened(false);
-    goBackToPreviousHotkeyScope();
+    removeFocusItemFromFocusStackById({ focusId: instanceId });
   };
 
   useRegisterInputEvents<string>({
+    focusId: instanceId,
     inputRef: wrapperRef,
     inputValue: draftValue,
     onEnter: () => {
@@ -131,6 +137,7 @@ const Input = ({
 };
 
 export const TitleInput = ({
+  instanceId,
   disabled,
   value,
   sizeVariant = 'md',
@@ -145,12 +152,13 @@ export const TitleInput = ({
 }: TitleInputProps) => {
   const [isOpened, setIsOpened] = useState(false);
 
-  const { setHotkeyScopeAndMemorizePreviousScope } = usePreviousHotkeyScope();
+  const { pushFocusItemToFocusStack } = usePushFocusItemToFocusStack();
 
   return (
     <>
       {isOpened ? (
         <Input
+          instanceId={instanceId}
           sizeVariant={sizeVariant}
           value={value}
           onChange={onChange}
@@ -170,8 +178,16 @@ export const TitleInput = ({
           onClick={() => {
             if (!disabled) {
               setIsOpened(true);
-              setHotkeyScopeAndMemorizePreviousScope({
-                scope: hotkeyScope,
+              pushFocusItemToFocusStack({
+                focusId: instanceId,
+                component: {
+                  type: FocusComponentType.TEXT_INPUT,
+                  instanceId: instanceId,
+                },
+                globalHotkeysConfig: {
+                  enableGlobalHotkeysConflictingWithKeyboard: false,
+                },
+                hotkeyScope: { scope: hotkeyScope },
               });
             }
           }}
diff --git a/packages/twenty-front/src/modules/ui/input/components/__stories__/AutosizeTextInput.stories.tsx b/packages/twenty-front/src/modules/ui/input/components/__stories__/AutosizeTextInput.stories.tsx
deleted file mode 100644
index 3bce0a831..000000000
--- a/packages/twenty-front/src/modules/ui/input/components/__stories__/AutosizeTextInput.stories.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import {
-  AutosizeTextInput,
-  AutosizeTextInputVariant,
-} from '../AutosizeTextInput';
-import {
-  CatalogDecorator,
-  CatalogStory,
-  ComponentDecorator,
-} from 'twenty-ui/testing';
-
-const meta: Meta<typeof AutosizeTextInput> = {
-  title: 'UI/Input/AutosizeTextInput/AutosizeTextInput',
-  component: AutosizeTextInput,
-  decorators: [ComponentDecorator],
-};
-
-export default meta;
-type Story = StoryObj<typeof AutosizeTextInput>;
-
-export const Default: Story = {};
-
-export const ButtonVariant: Story = {
-  args: { variant: AutosizeTextInputVariant.Button },
-};
-
-export const Catalog: CatalogStory<Story, typeof AutosizeTextInput> = {
-  parameters: {
-    catalog: {
-      dimensions: [
-        {
-          name: 'variants',
-          values: Object.values(AutosizeTextInputVariant),
-          props: (variant: AutosizeTextInputVariant) => ({ variant }),
-          labels: (variant: AutosizeTextInputVariant) =>
-            `variant -> ${variant}`,
-        },
-        {
-          name: 'minRows',
-          values: [1, 4],
-          props: (minRows: number) => ({ minRows }),
-          labels: (minRows: number) => `minRows -> ${minRows}`,
-        },
-      ],
-    },
-  },
-  decorators: [CatalogDecorator],
-};
diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/RelativeDatePickerHeader.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/RelativeDatePickerHeader.tsx
index 0c7a15744..89a165333 100644
--- a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/RelativeDatePickerHeader.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/RelativeDatePickerHeader.tsx
@@ -72,6 +72,7 @@ export const RelativeDatePickerHeader = (
         fullWidth
       />
       <TextInput
+        instanceId="relative-date-picker-amount"
         width={50}
         value={textInputValue}
         onChange={(text) => {
diff --git a/packages/twenty-front/src/modules/ui/input/types/IconPickerHotkeyScope.ts b/packages/twenty-front/src/modules/ui/input/types/IconPickerHotkeyScope.ts
deleted file mode 100644
index f38981837..000000000
--- a/packages/twenty-front/src/modules/ui/input/types/IconPickerHotkeyScope.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export enum IconPickerHotkeyScope {
-  IconPicker = 'icon-picker',
-}
diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx
index 5481a80b0..50e63dc0b 100644
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuInput.tsx
@@ -4,8 +4,8 @@ import { forwardRef, InputHTMLAttributes, ReactNode, useRef } from 'react';
 import 'react-phone-number-input/style.css';
 
 import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents';
-import { useCombinedRefs } from '~/hooks/useCombinedRefs';
 import { TEXT_INPUT_STYLE } from 'twenty-ui/theme';
+import { useCombinedRefs } from '~/hooks/useCombinedRefs';
 
 const StyledInput = styled.input<{
   withRightComponent?: boolean;
@@ -52,6 +52,7 @@ const StyledErrorDiv = styled.div`
 type HTMLInputProps = InputHTMLAttributes<HTMLInputElement>;
 
 export type DropdownMenuInputProps = HTMLInputProps & {
+  instanceId: string;
   hotkeyScope?: string;
   onClickOutside?: () => void;
   onEnter?: () => void;
@@ -79,6 +80,7 @@ export const DropdownMenuInput = forwardRef<
       className,
       value,
       placeholder,
+      instanceId,
       hotkeyScope = 'dropdown-menu-input',
       onChange,
       onClickOutside,
@@ -97,6 +99,7 @@ export const DropdownMenuInput = forwardRef<
     const combinedRef = useCombinedRefs(ref, inputRef);
 
     useRegisterInputEvents({
+      focusId: instanceId,
       inputRef,
       inputValue: value,
       onEnter,
diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/Dropdown.stories.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/Dropdown.stories.tsx
index 16b2753a6..6cd8985c5 100644
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/Dropdown.stories.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/Dropdown.stories.tsx
@@ -300,7 +300,11 @@ export const WithInput: Story = {
   args: {
     dropdownComponents: (
       <DropdownContent>
-        <DropdownMenuInput value="Lorem ipsum" autoFocus />
+        <DropdownMenuInput
+          instanceId="dropdown-menu-input"
+          value="Lorem ipsum"
+          autoFocus
+        />
         <DropdownMenuSeparator />
         <DropdownMenuItemsContainer hasMaxHeight>
           {optionsMock.map(({ name }) => (
diff --git a/packages/twenty-front/src/modules/ui/layout/modal/components/ConfirmationModal.tsx b/packages/twenty-front/src/modules/ui/layout/modal/components/ConfirmationModal.tsx
index 48a87b206..010bd8444 100644
--- a/packages/twenty-front/src/modules/ui/layout/modal/components/ConfirmationModal.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/modal/components/ConfirmationModal.tsx
@@ -130,6 +130,7 @@ export const ConfirmationModal = ({
       {confirmationValue && (
         <Section>
           <TextInput
+            instanceId="confirmation-modal-input"
             dataTestId="confirmation-modal-input"
             value={inputConfirmationValue}
             onChange={handleInputConfimrationValueChange}
diff --git a/packages/twenty-front/src/modules/ui/layout/selectable-list/components/SelectableListItem.tsx b/packages/twenty-front/src/modules/ui/layout/selectable-list/components/SelectableListItem.tsx
index a4e1b02db..8dc5d04ea 100644
--- a/packages/twenty-front/src/modules/ui/layout/selectable-list/components/SelectableListItem.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/selectable-list/components/SelectableListItem.tsx
@@ -3,25 +3,17 @@ import { ReactNode, useEffect, useRef } from 'react';
 import { SelectableListItemHotkeyEffect } from '@/ui/layout/selectable-list/components/SelectableListItemHotkeyEffect';
 import { isSelectedItemIdComponentFamilySelector } from '@/ui/layout/selectable-list/states/selectors/isSelectedItemIdComponentFamilySelector';
 import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2';
-import styled from '@emotion/styled';
 import { isDefined } from 'twenty-shared/utils';
 
-const StyledContainer = styled.div`
-  height: 100%;
-  width: 100%;
-`;
-
 export type SelectableListItemProps = {
   itemId: string;
   children: ReactNode;
-  className?: string;
   onEnter?: () => void;
 };
 
 export const SelectableListItem = ({
   itemId,
   children,
-  className,
   onEnter,
 }: SelectableListItemProps) => {
   const isSelectedItemId = useRecoilComponentFamilyValueV2(
@@ -42,9 +34,7 @@ export const SelectableListItem = ({
       {isSelectedItemId && isDefined(onEnter) && (
         <SelectableListItemHotkeyEffect itemId={itemId} onEnter={onEnter} />
       )}
-      <StyledContainer className={className} ref={scrollRef}>
-        {children}
-      </StyledContainer>
+      {children}
     </>
   );
 };
diff --git a/packages/twenty-front/src/modules/ui/utilities/focus/types/FocusComponentType.ts b/packages/twenty-front/src/modules/ui/utilities/focus/types/FocusComponentType.ts
index 446552cbe..4af63acdc 100644
--- a/packages/twenty-front/src/modules/ui/utilities/focus/types/FocusComponentType.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/focus/types/FocusComponentType.ts
@@ -7,7 +7,8 @@ export enum FocusComponentType {
   RECORD_TABLE = 'record-table',
   RECORD_TABLE_ROW = 'record-table-row',
   RECORD_TABLE_CELL = 'record-table-cell',
-  RECORD_BOARD = 'record-board',
+  TEXT_AREA = 'text-area',
+  TEXT_INPUT = 'text-input',
   RECORD_BOARD_CARD = 'record-board-card',
   ACTIVITY_RICH_TEXT_EDITOR = 'activity-rich-text-editor',
 }
diff --git a/packages/twenty-front/src/modules/ui/utilities/hotkey/constants/DebugHotkeyScope.ts b/packages/twenty-front/src/modules/ui/utilities/hotkey/constants/DebugHotkeyScope.ts
index 0ac5ab524..a46853a42 100644
--- a/packages/twenty-front/src/modules/ui/utilities/hotkey/constants/DebugHotkeyScope.ts
+++ b/packages/twenty-front/src/modules/ui/utilities/hotkey/constants/DebugHotkeyScope.ts
@@ -1 +1 @@
-export const DEBUG_HOTKEY_SCOPE = false;
+export const DEBUG_HOTKEY_SCOPE = true;
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/components/WorkflowStepHeader.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/components/WorkflowStepHeader.tsx
index ac363b0fd..1e1d11bf5 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/components/WorkflowStepHeader.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/components/WorkflowStepHeader.tsx
@@ -101,6 +101,7 @@ export const WorkflowStepHeader = ({
       <StyledHeaderInfo>
         <StyledHeaderTitle>
           <TitleInput
+            instanceId="workflow-step-title-input"
             disabled={disabled}
             sizeVariant="md"
             value={title}
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/code-action/components/WorkflowEditActionServerlessFunction.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/code-action/components/WorkflowEditActionServerlessFunction.tsx
index f77635d1a..8e59e90bc 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/code-action/components/WorkflowEditActionServerlessFunction.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/code-action/components/WorkflowEditActionServerlessFunction.tsx
@@ -287,6 +287,8 @@ export const WorkflowEditActionServerlessFunction = ({
   const headerIconColor = useActionIconColorOrThrow(action.type);
   const headerType = useActionHeaderTypeOrThrow(action.type);
 
+  const testLogsTextAreaId = `${serverlessFunctionId}-test-logs`;
+
   return (
     !loading && (
       <>
@@ -350,6 +352,7 @@ export const WorkflowEditActionServerlessFunction = ({
                 <StyledCodeEditorContainer>
                   <InputLabel>Logs</InputLabel>
                   <TextArea
+                    textAreaId={testLogsTextAreaId}
                     value={
                       isTesting ? '' : serverlessFunctionTestData.output.logs
                     }
diff --git a/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablePicker.tsx b/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablePicker.tsx
index 742ce5fd0..3fbca9f51 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablePicker.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablePicker.tsx
@@ -37,7 +37,7 @@ export const StyledSearchVariablesDropdownContainer = styled.div<{
 `;
 
 export const WorkflowVariablePicker: VariablePickerComponent = ({
-  inputId,
+  instanceId,
   disabled,
   multiline,
   onVariableSelect,
@@ -49,7 +49,7 @@ export const WorkflowVariablePicker: VariablePickerComponent = ({
       readonly={disabled}
     >
       <WorkflowVariablesDropdown
-        inputId={inputId}
+        instanceId={instanceId}
         onVariableSelect={onVariableSelect}
         disabled={disabled}
         objectNameSingularToSelect={objectNameSingularToSelect}
diff --git a/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdown.tsx b/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdown.tsx
index badcaa5c6..5a8558673 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdown.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdown.tsx
@@ -32,13 +32,13 @@ const StyledDropdownVariableButtonContainer = styled(
 `;
 
 export const WorkflowVariablesDropdown = ({
-  inputId,
+  instanceId,
   onVariableSelect,
   disabled,
   objectNameSingularToSelect,
   multiline,
 }: {
-  inputId: string;
+  instanceId: string;
   onVariableSelect: (variableName: string) => void;
   disabled?: boolean;
   objectNameSingularToSelect?: string;
@@ -46,7 +46,7 @@ export const WorkflowVariablesDropdown = ({
 }) => {
   const theme = useTheme();
 
-  const dropdownId = `${SEARCH_VARIABLES_DROPDOWN_ID}-${inputId}`;
+  const dropdownId = `${SEARCH_VARIABLES_DROPDOWN_ID}-${instanceId}`;
   const isDropdownOpen = useRecoilComponentValueV2(
     isDropdownOpenComponentStateV2,
     dropdownId,
diff --git a/packages/twenty-front/src/modules/workspace/components/WorkspaceInviteLink.tsx b/packages/twenty-front/src/modules/workspace/components/WorkspaceInviteLink.tsx
index 359fd0851..7b0ee8b20 100644
--- a/packages/twenty-front/src/modules/workspace/components/WorkspaceInviteLink.tsx
+++ b/packages/twenty-front/src/modules/workspace/components/WorkspaceInviteLink.tsx
@@ -33,7 +33,12 @@ export const WorkspaceInviteLink = ({
   return (
     <StyledContainer data-chromatic="ignore">
       <StyledLinkContainer>
-        <TextInput value={inviteLink} disabled fullWidth />
+        <TextInput
+          instanceId="workspace-invite-link"
+          value={inviteLink}
+          disabled
+          fullWidth
+        />
       </StyledLinkContainer>
       <Button
         Icon={IconLink}
diff --git a/packages/twenty-front/src/modules/workspace/components/WorkspaceInviteTeam.tsx b/packages/twenty-front/src/modules/workspace/components/WorkspaceInviteTeam.tsx
index 540b6897d..61e5c441a 100644
--- a/packages/twenty-front/src/modules/workspace/components/WorkspaceInviteTeam.tsx
+++ b/packages/twenty-front/src/modules/workspace/components/WorkspaceInviteTeam.tsx
@@ -123,6 +123,7 @@ export const WorkspaceInviteTeam = () => {
             render={({ field: { value, onChange }, fieldState: { error } }) => {
               return (
                 <TextInput
+                  instanceId="workspace-invite-team-emails"
                   placeholder="tim@apple.com, jony.ive@apple.dev"
                   value={value}
                   onChange={onChange}
diff --git a/packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx b/packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx
index 3a47172f4..dc4878e05 100644
--- a/packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx
+++ b/packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx
@@ -216,6 +216,7 @@ export const SettingsWorkspaceMembers = () => {
           />
           <StyledSearchContainer>
             <StyledSearchInput
+              instanceId="workspace-members-search"
               value={searchFilter}
               onChange={handleSearchChange}
               placeholder={t`Search a team member...`}
diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldTable.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldTable.tsx
index 4e0f1e4d1..64146861a 100644
--- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldTable.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldTable.tsx
@@ -17,9 +17,9 @@ import { useLingui } from '@lingui/react/macro';
 import { isNonEmptyArray } from '@sniptt/guards';
 import { useEffect, useMemo, useState } from 'react';
 import { useRecoilState } from 'recoil';
+import { IconSearch } from 'twenty-ui/display';
 import { useMapFieldMetadataItemToSettingsObjectDetailTableItem } from '~/pages/settings/data-model/hooks/useMapFieldMetadataItemToSettingsObjectDetailTableItem';
 import { SettingsObjectDetailTableItem } from '~/pages/settings/data-model/types/SettingsObjectDetailTableItem';
-import { IconSearch } from 'twenty-ui/display';
 
 const GET_SETTINGS_OBJECT_DETAIL_TABLE_METADATA_STANDARD: TableMetadata<SettingsObjectDetailTableItem> =
   {
@@ -178,6 +178,7 @@ export const SettingsObjectFieldTable = ({
   return (
     <>
       <StyledSearchInput
+        instanceId="object-field-table-search"
         LeftIcon={IconSearch}
         placeholder={t`Search a field...`}
         value={searchTerm}
diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectIndexTable.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectIndexTable.tsx
index 5e14318f5..dfff9a4dc 100644
--- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectIndexTable.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectIndexTable.tsx
@@ -14,8 +14,8 @@ import { useLingui } from '@lingui/react/macro';
 import { isNonEmptyArray } from '@sniptt/guards';
 import { useEffect, useMemo, useState } from 'react';
 import { useRecoilState } from 'recoil';
-import { SettingsObjectIndexesTableItem } from '~/pages/settings/data-model/types/SettingsObjectIndexesTableItem';
 import { IconSearch, IconSquareKey } from 'twenty-ui/display';
+import { SettingsObjectIndexesTableItem } from '~/pages/settings/data-model/types/SettingsObjectIndexesTableItem';
 
 export const StyledObjectIndexTableRow = styled(TableRow)`
   grid-template-columns: 350px 70px 80px;
@@ -113,6 +113,7 @@ export const SettingsObjectIndexTable = ({
   return (
     <>
       <StyledSearchInput
+        instanceId="object-index-table-search"
         LeftIcon={IconSearch}
         placeholder={t`Search an index...`}
         value={searchTerm}
diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjects.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjects.tsx
index e36f32607..4d7f24058 100644
--- a/packages/twenty-front/src/pages/settings/data-model/SettingsObjects.tsx
+++ b/packages/twenty-front/src/pages/settings/data-model/SettingsObjects.tsx
@@ -170,6 +170,7 @@ export const SettingsObjects = () => {
             <H2Title title={t`Existing objects`} />
 
             <StyledSearchInput
+              instanceId="settings-objects-search"
               LeftIcon={IconSearch}
               placeholder={t`Search for an object...`}
               value={searchTerm}
diff --git a/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail.tsx b/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail.tsx
index a884dead1..58906de2d 100644
--- a/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail.tsx
+++ b/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail.tsx
@@ -221,6 +221,7 @@ export const SettingsDevelopersApiKeyDetail = () => {
                 description={t`When the key will be disabled`}
               />
               <TextInput
+                instanceId={`api-key-expiration-${apiKeyData?.id}`}
                 placeholder={t`E.g. backoffice integration`}
                 value={formatExpiration(
                   apiKeyData?.expiresAt || '',
diff --git a/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeysNew.tsx b/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeysNew.tsx
index 7e417d23c..064a034c4 100644
--- a/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeysNew.tsx
+++ b/packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeysNew.tsx
@@ -106,6 +106,7 @@ export const SettingsDevelopersApiKeysNew = () => {
         <Section>
           <H2Title title={t`Name`} description={t`Name of your API key`} />
           <TextInput
+            instanceId="api-key-new-name"
             placeholder={t`E.g. backoffice integration`}
             value={formValues.name}
             onKeyDown={(e) => {
diff --git a/packages/twenty-front/src/pages/settings/security/SettingsSecurityApprovedAccessDomain.tsx b/packages/twenty-front/src/pages/settings/security/SettingsSecurityApprovedAccessDomain.tsx
index b8d3c2d80..1ec128791 100644
--- a/packages/twenty-front/src/pages/settings/security/SettingsSecurityApprovedAccessDomain.tsx
+++ b/packages/twenty-front/src/pages/settings/security/SettingsSecurityApprovedAccessDomain.tsx
@@ -116,6 +116,7 @@ export const SettingsSecurityApprovedAccessDomain = () => {
                 fieldState: { error },
               }) => (
                 <TextInput
+                  instanceId="approved-access-domain"
                   autoFocus
                   autoComplete="off"
                   value={value}
@@ -140,6 +141,7 @@ export const SettingsSecurityApprovedAccessDomain = () => {
                 fieldState: { error },
               }) => (
                 <TextInput
+                  instanceId="approved-access-domain-email"
                   autoComplete="off"
                   value={value.split('@')[0]}
                   onChange={onChange}
diff --git a/packages/twenty-ui/src/navigation/link/components/AdvancedSettingsToggle.tsx b/packages/twenty-ui/src/navigation/link/components/AdvancedSettingsToggle.tsx
index ea5e9c8df..2541d6e70 100644
--- a/packages/twenty-ui/src/navigation/link/components/AdvancedSettingsToggle.tsx
+++ b/packages/twenty-ui/src/navigation/link/components/AdvancedSettingsToggle.tsx
@@ -48,7 +48,7 @@ export const AdvancedSettingsToggle = ({
   const onChange = (newValue: boolean) => {
     setIsAdvancedModeEnabled(newValue);
   };
-  const inputId = useId();
+  const instanceId = useId();
 
   return (
     <StyledContainer>
@@ -59,11 +59,11 @@ export const AdvancedSettingsToggle = ({
           fill={MAIN_COLORS.yellow}
         />
       </StyledIconContainer>
-      <StyledToggleContainer htmlFor={inputId}>
+      <StyledToggleContainer htmlFor={instanceId}>
         <StyledText>{label}</StyledText>
 
         <Toggle
-          id={inputId}
+          id={instanceId}
           onChange={onChange}
           color={MAIN_COLORS.yellow}
           value={isAdvancedModeEnabled}
diff --git a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemToggle.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemToggle.tsx
index 1458ed03e..64d93b28d 100644
--- a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemToggle.tsx
+++ b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemToggle.tsx
@@ -35,14 +35,14 @@ export const MenuItemToggle = ({
   onToggleChange,
   toggleSize,
 }: MenuItemToggleProps) => {
-  const inputId = useId();
+  const instanceId = useId();
   return (
     <StyledMenuItemBase className={className} focused={focused}>
-      <StyledToggleContainer htmlFor={inputId}>
+      <StyledToggleContainer htmlFor={instanceId}>
         <MenuItemLeftContent LeftIcon={LeftIcon} text={text} />
         <StyledMenuItemRightContent>
           <Toggle
-            id={inputId}
+            id={instanceId}
             value={toggled}
             onChange={onToggleChange}
             toggleSize={toggleSize}