diff --git a/packages/twenty-front/src/modules/object-record/record-board/hooks/useRecordBoardCardNavigation.ts b/packages/twenty-front/src/modules/object-record/record-board/hooks/useRecordBoardCardNavigation.ts index 5dc486d1c..41a8a9e8b 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/hooks/useRecordBoardCardNavigation.ts +++ b/packages/twenty-front/src/modules/object-record/record-board/hooks/useRecordBoardCardNavigation.ts @@ -28,6 +28,34 @@ export const useRecordBoardCardNavigation = (recordBoardId?: string) => { recordIndexRecordIdsByGroupComponentFamilyState, ); + const focusFirstAvailableRecord = useRecoilCallback( + ({ snapshot }) => + () => { + if (visibleRecordGroupIds.length === 0) { + return; + } + + const firstColumnWithRecords = visibleRecordGroupIds.findIndex( + (groupId) => { + const recordIdsInGroup = snapshot + .getLoadable(recordIdsByGroupState(groupId)) + .getValue(); + return ( + Array.isArray(recordIdsInGroup) && recordIdsInGroup.length > 0 + ); + }, + ); + + if (firstColumnWithRecords !== -1) { + focusBoardCard({ + columnIndex: firstColumnWithRecords, + rowIndex: 0, + }); + } + }, + [visibleRecordGroupIds, recordIdsByGroupState, focusBoardCard], + ); + const moveHorizontally = useRecoilCallback( ({ snapshot }) => (direction: 'left' | 'right') => { @@ -36,26 +64,7 @@ export const useRecordBoardCardNavigation = (recordBoardId?: string) => { .getValue(); if (!isDefined(focusedBoardCardIndexes)) { - if (visibleRecordGroupIds.length === 0) { - return; - } - - const firstGroupId = visibleRecordGroupIds[0]; - const recordIdsInFirstGroup = snapshot - .getLoadable(recordIdsByGroupState(firstGroupId)) - .getValue(); - - if ( - !Array.isArray(recordIdsInFirstGroup) || - recordIdsInFirstGroup.length === 0 - ) { - return; - } - - focusBoardCard({ - columnIndex: 0, - rowIndex: 0, - }); + focusFirstAvailableRecord(); return; } @@ -97,6 +106,7 @@ export const useRecordBoardCardNavigation = (recordBoardId?: string) => { newColumnIndex < 0 || newColumnIndex >= visibleRecordGroupIds.length ) { + focusFirstAvailableRecord(); return; } @@ -129,6 +139,7 @@ export const useRecordBoardCardNavigation = (recordBoardId?: string) => { visibleRecordGroupIds, recordIdsByGroupState, focusBoardCard, + focusFirstAvailableRecord, ], ); @@ -140,25 +151,7 @@ export const useRecordBoardCardNavigation = (recordBoardId?: string) => { .getValue(); if (!isDefined(focusedBoardCardIndexes)) { - if (visibleRecordGroupIds.length === 0) return; - - const firstGroupId = visibleRecordGroupIds[0]; - const recordIdsInFirstGroup = snapshot - .getLoadable(recordIdsByGroupState(firstGroupId)) - .getValue(); - - if ( - !Array.isArray(recordIdsInFirstGroup) || - recordIdsInFirstGroup.length === 0 - ) { - return; - } - - focusBoardCard({ - columnIndex: 0, - rowIndex: 0, - }); - + focusFirstAvailableRecord(); return; } @@ -171,6 +164,7 @@ export const useRecordBoardCardNavigation = (recordBoardId?: string) => { .getValue(); if (!Array.isArray(recordIdsInGroup) || recordIdsInGroup.length === 0) { + focusFirstAvailableRecord(); return; } @@ -199,6 +193,7 @@ export const useRecordBoardCardNavigation = (recordBoardId?: string) => { visibleRecordGroupIds, recordIdsByGroupState, focusBoardCard, + focusFirstAvailableRecord, ], );