admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix record page title focus (#11145)

Browse Source 
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
This commit is contained in:
Raphaël Bosi
2025-03-25 11:54:29 +01:00
committed by GitHub
parent d601213c21
commit f3f4dd7648
3 changed files with 17 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCell.tsx
View File

@ -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,
),
}}
>

9
packages/twenty-front/src/modules/object-record/record-title-cell/hooks/useRecordTitleCell.tsx
View File

@ -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,
);

6
packages/twenty-front/src/modules/object-record/record-title-cell/utils/getRecordTitleCellId.ts Normal file
View File

@ -0,0 +1,6 @@
export const getRecordTitleCellId = (
recordId: string,
fieldMetadataId: string,
) => {
return `${recordId}-${fieldMetadataId}`;
};