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

Fix/record board keyboard navigation empty columns (#12103)

Browse Source 
https://github.com/user-attachments/assets/6830217b-28a9-46e6-a9f5-40d508cd262b

Closes #12077
This commit is contained in:
Abdul Rahman
2025-05-20 02:52:56 +05:30
committed by GitHub
parent 42c69dd11a
commit 503aeee81f
1 changed files with 34 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
packages/twenty-front/src/modules/object-record/record-board/hooks/useRecordBoardCardNavigation.ts
View File

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