From f3f4dd76482f1acb4e929b07241ea6f53376788a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?=
 <71827178+bosiraphael@users.noreply.github.com>
Date: Tue, 25 Mar 2025 11:54:29 +0100
Subject: [PATCH] Fix record page title focus (#11145)

Fix record page title focus when creating a new record.

Before:


https://github.com/user-attachments/assets/3f032873-ef5b-4799-a6b7-6459674e4347


After:


https://github.com/user-attachments/assets/7ca4107d-cea8-477d-9e6a-2b74c3121a13
---
 .../components/RecordTitleCell.tsx                  | 13 ++++---------
 .../record-title-cell/hooks/useRecordTitleCell.tsx  |  9 +++++++--
 .../record-title-cell/utils/getRecordTitleCellId.ts |  6 ++++++
 3 files changed, 17 insertions(+), 11 deletions(-)
 create mode 100644 packages/twenty-front/src/modules/object-record/record-title-cell/utils/getRecordTitleCellId.ts

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 af7cb13ba..67e93157d 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
@@ -16,7 +16,7 @@ import {
 } from '@/object-record/record-title-cell/components/RecordTitleCellContext';
 import { RecordTitleCellFieldDisplay } from '@/object-record/record-title-cell/components/RecordTitleCellFieldDisplay';
 import { RecordTitleCellFieldInput } from '@/object-record/record-title-cell/components/RecordTitleCellFieldInput';
-import { getRecordFieldInputId } from '@/object-record/utils/getRecordFieldInputId';
+import { getRecordTitleCellId } from '@/object-record/record-title-cell/utils/getRecordTitleCellId';
 
 type RecordTitleCellProps = {
   loading?: boolean;
@@ -32,11 +32,7 @@ export const RecordTitleCell = ({
   const isFieldInputOnly = useIsFieldInputOnly();
 
   const { closeInlineCell } = useInlineCell(
-    getRecordFieldInputId(
-      recordId,
-      fieldDefinition?.metadata?.fieldName,
-      'title',
-    ),
+    getRecordTitleCellId(recordId, fieldDefinition?.fieldMetadataId),
   );
 
   const handleEnter: FieldInputEvent = (persistField) => {
@@ -87,10 +83,9 @@ export const RecordTitleCell = ({
   return (
     <RecordFieldComponentInstanceContext.Provider
       value={{
-        instanceId: getRecordFieldInputId(
+        instanceId: getRecordTitleCellId(
           recordId,
-          fieldDefinition?.metadata?.fieldName,
-          'title',
+          fieldDefinition?.fieldMetadataId,
         ),
       }}
     >
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 900c5dc75..a3e4c1d8c 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
@@ -1,5 +1,6 @@
 import { isInlineCellInEditModeScopedState } from '@/object-record/record-inline-cell/states/isInlineCellInEditModeScopedState';
 import { InlineCellHotkeyScope } from '@/object-record/record-inline-cell/types/InlineCellHotkeyScope';
+import { getRecordTitleCellId } from '@/object-record/record-title-cell/utils/getRecordTitleCellId';
 import { useGoBackToPreviousDropdownFocusId } from '@/ui/layout/dropdown/hooks/useGoBackToPreviousDropdownFocusId';
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
@@ -25,7 +26,9 @@ export const useRecordTitleCell = () => {
         fieldMetadataId: string;
       }) => {
         set(
-          isInlineCellInEditModeScopedState(recordId + fieldMetadataId),
+          isInlineCellInEditModeScopedState(
+            getRecordTitleCellId(recordId, fieldMetadataId),
+          ),
           false,
         );
 
@@ -48,7 +51,9 @@ export const useRecordTitleCell = () => {
         customEditHotkeyScopeForField?: HotkeyScope;
       }) => {
         set(
-          isInlineCellInEditModeScopedState(recordId + fieldMetadataId),
+          isInlineCellInEditModeScopedState(
+            getRecordTitleCellId(recordId, fieldMetadataId),
+          ),
           true,
         );
 
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
new file mode 100644
index 000000000..9a710a986
--- /dev/null
+++ b/packages/twenty-front/src/modules/object-record/record-title-cell/utils/getRecordTitleCellId.ts
@@ -0,0 +1,6 @@
+export const getRecordTitleCellId = (
+  recordId: string,
+  fieldMetadataId: string,
+) => {
+  return `${recordId}-${fieldMetadataId}`;
+};