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'; } from '@/object-record/record-title-cell/components/RecordTitleCellContext';
import { RecordTitleCellFieldDisplay } from '@/object-record/record-title-cell/components/RecordTitleCellFieldDisplay'; import { RecordTitleCellFieldDisplay } from '@/object-record/record-title-cell/components/RecordTitleCellFieldDisplay';
import { RecordTitleCellFieldInput } from '@/object-record/record-title-cell/components/RecordTitleCellFieldInput'; 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 = { type RecordTitleCellProps = {
loading?: boolean; loading?: boolean;
@ -32,11 +32,7 @@ export const RecordTitleCell = ({
const isFieldInputOnly = useIsFieldInputOnly(); const isFieldInputOnly = useIsFieldInputOnly();
const { closeInlineCell } = useInlineCell( const { closeInlineCell } = useInlineCell(
getRecordFieldInputId( getRecordTitleCellId(recordId, fieldDefinition?.fieldMetadataId),
recordId,
fieldDefinition?.metadata?.fieldName,
'title',
),
); );
const handleEnter: FieldInputEvent = (persistField) => { const handleEnter: FieldInputEvent = (persistField) => {
@ -87,10 +83,9 @@ export const RecordTitleCell = ({
return ( return (
<RecordFieldComponentInstanceContext.Provider <RecordFieldComponentInstanceContext.Provider
value={{ value={{
instanceId: getRecordFieldInputId( instanceId: getRecordTitleCellId(
recordId, recordId,
fieldDefinition?.metadata?.fieldName, fieldDefinition?.fieldMetadataId,
'title',
), ),
}} }}
> >

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 { isInlineCellInEditModeScopedState } from '@/object-record/record-inline-cell/states/isInlineCellInEditModeScopedState';
import { InlineCellHotkeyScope } from '@/object-record/record-inline-cell/types/InlineCellHotkeyScope'; 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 { useGoBackToPreviousDropdownFocusId } from '@/ui/layout/dropdown/hooks/useGoBackToPreviousDropdownFocusId';
import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope'; import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope'; import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
@ -25,7 +26,9 @@ export const useRecordTitleCell = () => {
fieldMetadataId: string; fieldMetadataId: string;
}) => { }) => {
set( set(
isInlineCellInEditModeScopedState(recordId + fieldMetadataId), isInlineCellInEditModeScopedState(
getRecordTitleCellId(recordId, fieldMetadataId),
),
false, false,
); );
@ -48,7 +51,9 @@ export const useRecordTitleCell = () => {
customEditHotkeyScopeForField?: HotkeyScope; customEditHotkeyScopeForField?: HotkeyScope;
}) => { }) => {
set( set(
isInlineCellInEditModeScopedState(recordId + fieldMetadataId), isInlineCellInEditModeScopedState(
getRecordTitleCellId(recordId, fieldMetadataId),
),
true, 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}`;
};