From 8a21c19f039feb82d56f0189c080b43b681dcaa2 Mon Sep 17 00:00:00 2001
From: Charles Bochet <charles@twenty.com>
Date: Sat, 22 Mar 2025 18:52:57 +0100
Subject: [PATCH] Fix missing record field component instanceId

---
 .../components/EventFieldDiffValue.tsx        | 49 +++++++++++--------
 .../record-field/components/FieldInput.tsx    |  1 -
 .../components/RecordInlineCell.tsx           |  7 ---
 .../record-inline-cell/hooks/useInlineCell.ts |  7 +--
 .../components/RecordTableCellFieldInput.tsx  | 10 ----
 5 files changed, 29 insertions(+), 45 deletions(-)

diff --git a/packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventFieldDiffValue.tsx b/packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventFieldDiffValue.tsx
index 667c3c214..8bbf8de17 100644
--- a/packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventFieldDiffValue.tsx
+++ b/packages/twenty-front/src/modules/activities/timeline-activities/rows/main-object/components/EventFieldDiffValue.tsx
@@ -5,6 +5,7 @@ import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { isLabelIdentifierField } from '@/object-metadata/utils/isLabelIdentifierField';
 import { FieldDisplay } from '@/object-record/record-field/components/FieldDisplay';
 import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
+import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
 
 type EventFieldDiffValueProps = {
   diffArtificialRecordStoreId: string;
@@ -28,30 +29,36 @@ export const EventFieldDiffValue = ({
 }: EventFieldDiffValueProps) => {
   return (
     <StyledEventFieldDiffValue>
-      <FieldContext.Provider
+      <RecordFieldComponentInstanceContext.Provider
         value={{
-          recordId: diffArtificialRecordStoreId,
-          isLabelIdentifier: isLabelIdentifierField({
-            fieldMetadataItem,
-            objectMetadataItem: mainObjectMetadataItem,
-          }),
-          fieldDefinition: {
-            type: fieldMetadataItem.type,
-            iconName: fieldMetadataItem?.icon || 'FieldIcon',
-            fieldMetadataId: fieldMetadataItem.id || '',
-            label: fieldMetadataItem.label,
-            metadata: {
-              fieldName: fieldMetadataItem.name,
-              objectMetadataNameSingular: mainObjectMetadataItem.nameSingular,
-              options: fieldMetadataItem.options ?? [],
-            },
-            defaultValue: fieldMetadataItem.defaultValue,
-          },
-          hotkeyScope: 'field-event-diff',
+          instanceId: `${diffArtificialRecordStoreId}-${fieldMetadataItem.name}`,
         }}
       >
-        <FieldDisplay />
-      </FieldContext.Provider>
+        <FieldContext.Provider
+          value={{
+            recordId: diffArtificialRecordStoreId,
+            isLabelIdentifier: isLabelIdentifierField({
+              fieldMetadataItem,
+              objectMetadataItem: mainObjectMetadataItem,
+            }),
+            fieldDefinition: {
+              type: fieldMetadataItem.type,
+              iconName: fieldMetadataItem?.icon || 'FieldIcon',
+              fieldMetadataId: fieldMetadataItem.id || '',
+              label: fieldMetadataItem.label,
+              metadata: {
+                fieldName: fieldMetadataItem.name,
+                objectMetadataNameSingular: mainObjectMetadataItem.nameSingular,
+                options: fieldMetadataItem.options ?? [],
+              },
+              defaultValue: fieldMetadataItem.defaultValue,
+            },
+            hotkeyScope: 'field-event-diff',
+          }}
+        >
+          <FieldDisplay />
+        </FieldContext.Provider>
+      </RecordFieldComponentInstanceContext.Provider>
     </StyledEventFieldDiffValue>
   );
 };
diff --git a/packages/twenty-front/src/modules/object-record/record-field/components/FieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/components/FieldInput.tsx
index 28f305ff2..54d2dca4a 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/components/FieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/components/FieldInput.tsx
@@ -41,7 +41,6 @@ import { FieldInputEvent } from '../types/FieldInputEvent';
 import { isFieldText } from '../types/guards/isFieldText';
 
 type FieldInputProps = {
-  recordFieldInputdId: string;
   onSubmit?: FieldInputEvent;
   onCancel?: () => void;
   onClickOutside?: (
diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCell.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCell.tsx
index 0410485ce..fdeb54649 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
@@ -12,7 +12,6 @@ import { useIsFieldInputOnly } from '@/object-record/record-field/hooks/useIsFie
 import { useIsFieldValueReadOnly } from '@/object-record/record-field/hooks/useIsFieldValueReadOnly';
 import { useOpenFieldInputEditMode } from '@/object-record/record-field/hooks/useOpenFieldInputEditMode';
 import { FieldInputClickOutsideEvent } from '@/object-record/record-field/meta-types/input/components/DateTimeFieldInput';
-import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
 import { FieldDefinition } from '@/object-record/record-field/types/FieldDefinition';
 import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
 import { isFieldRelation } from '@/object-record/record-field/types/guards/isFieldRelation';
@@ -23,7 +22,6 @@ import { MultipleRecordPickerHotkeyScope } from '@/object-record/record-picker/m
 import { SingleRecordPickerHotkeyScope } from '@/object-record/record-picker/single-record-picker/types/SingleRecordPickerHotkeyScope';
 import { SelectFieldHotkeyScope } from '@/object-record/select/types/SelectFieldHotkeyScope';
 import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState';
-import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { useRecoilCallback } from 'recoil';
 import { RelationDefinitionType } from '~/generated-metadata/graphql';
 import { RecordInlineCellContainer } from './RecordInlineCellContainer';
@@ -46,10 +44,6 @@ export const RecordInlineCell = ({ loading }: RecordInlineCellProps) => {
     onCloseEditMode,
   } = useContext(FieldContext);
 
-  const recordFieldComponentInstanceId = useAvailableComponentInstanceIdOrThrow(
-    RecordFieldComponentInstanceContext,
-  );
-
   const buttonIcon = useGetButtonIcon();
 
   const isFieldInputOnly = useIsFieldInputOnly();
@@ -147,7 +141,6 @@ export const RecordInlineCell = ({ loading }: RecordInlineCellProps) => {
     isCentered,
     editModeContent: (
       <FieldInput
-        recordFieldInputdId={recordFieldComponentInstanceId}
         onEnter={handleEnter}
         onCancel={handleCancel}
         onEscape={handleEscape}
diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/hooks/useInlineCell.ts b/packages/twenty-front/src/modules/object-record/record-inline-cell/hooks/useInlineCell.ts
index 68e5f597b..88ff38626 100644
--- a/packages/twenty-front/src/modules/object-record/record-inline-cell/hooks/useInlineCell.ts
+++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/hooks/useInlineCell.ts
@@ -9,7 +9,6 @@ import { useInitDraftValueV2 } from '@/object-record/record-field/hooks/useInitD
 import { RecordFieldComponentInstanceContext } from '@/object-record/record-field/states/contexts/RecordFieldComponentInstanceContext';
 import { useRecordInlineCellContext } from '@/object-record/record-inline-cell/components/RecordInlineCellContext';
 import { getDropdownFocusIdForRecordField } from '@/object-record/utils/getDropdownFocusIdForRecordField';
-import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId';
 import { useGoBackToPreviousDropdownFocusId } from '@/ui/layout/dropdown/hooks/useGoBackToPreviousDropdownFocusId';
 import { useSetActiveDropdownFocusIdAndMemorizePrevious } from '@/ui/layout/dropdown/hooks/useSetFocusedDropdownIdAndMemorizePrevious';
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
@@ -59,11 +58,7 @@ export const useInlineCell = (
     initFieldInputDraftValue({
       recordId,
       fieldDefinition,
-      fieldComponentInstanceId: getRecordFieldInputId(
-        recordId,
-        fieldDefinition.metadata.fieldName,
-        'inline-cell',
-      ),
+      fieldComponentInstanceId: recordFieldComponentInstanceId,
     });
 
     if (isDefined(customEditHotkeyScopeForField)) {
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFieldInput.tsx
index 5dddbd693..86a6c4455 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFieldInput.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFieldInput.tsx
@@ -1,19 +1,13 @@
-import { useContext } from 'react';
-
 import { FieldInput } from '@/object-record/record-field/components/FieldInput';
-import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 import { useIsFieldValueReadOnly } from '@/object-record/record-field/hooks/useIsFieldValueReadOnly';
 import { FieldInputClickOutsideEvent } from '@/object-record/record-field/meta-types/input/components/DateTimeFieldInput';
 import { FieldInputEvent } from '@/object-record/record-field/types/FieldInputEvent';
 import { useRecordTableBodyContextOrThrow } from '@/object-record/record-table/contexts/RecordTableBodyContext';
 import { TableHotkeyScope } from '@/object-record/record-table/types/TableHotkeyScope';
-import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId';
 import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState';
 import { useRecoilCallback } from 'recoil';
 
 export const RecordTableCellFieldInput = () => {
-  const { recordId, fieldDefinition } = useContext(FieldContext);
-
   const { onMoveFocus, onCloseTableCell } = useRecordTableBodyContextOrThrow();
 
   const isFieldReadOnly = useIsFieldValueReadOnly();
@@ -74,10 +68,6 @@ export const RecordTableCellFieldInput = () => {
 
   return (
     <FieldInput
-      recordFieldInputdId={getRecordFieldInputId(
-        recordId,
-        fieldDefinition?.metadata?.fieldName,
-      )}
       onCancel={handleCancel}
       onClickOutside={handleClickOutside}
       onEnter={handleEnter}