From 503aeee81fb18963b1fd1a4b2a54bd4b26a2e913 Mon Sep 17 00:00:00 2001
From: Abdul Rahman <81605929+abdulrahmancodes@users.noreply.github.com>
Date: Tue, 20 May 2025 02:52:56 +0530
Subject: [PATCH] Fix/record board keyboard navigation empty columns (#12103)

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

Closes #12077
---
 .../hooks/useRecordBoardCardNavigation.ts     | 73 +++++++++----------
 1 file changed, 34 insertions(+), 39 deletions(-)

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