From 7a3e92fe0b7b9c106f96f2a36c07dd8b747777d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?=
 <71827178+bosiraphael@users.noreply.github.com>
Date: Fri, 21 Feb 2025 16:05:31 +0100
Subject: [PATCH] Fix command menu selectable items ordering (#10392)

The order of the selectableItems was not the same as the command groups
so the navigation with arrow keys inside the command menu was broken.

Before:


https://github.com/user-attachments/assets/a3487b58-9c26-4522-9e7b-584d30396a21


After:


https://github.com/user-attachments/assets/bd60263b-b4e2-4d41-bad1-eef9115caec6
---
 .../command-menu/components/CommandMenu.tsx   | 28 +++++++------------
 1 file changed, 10 insertions(+), 18 deletions(-)

diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx
index a5ac88220..2e03852c5 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx
@@ -36,18 +36,6 @@ export const CommandMenu = () => {
     commandMenuSearch,
   });
 
-  const selectableItems: Command[] = copilotCommands
-    .concat(
-      matchingStandardActionRecordSelectionCommands,
-      matchingStandardActionObjectCommands,
-      matchingWorkflowRunRecordSelectionCommands,
-      matchingStandardActionGlobalCommands,
-      matchingWorkflowRunGlobalCommands,
-      matchingNavigateCommands,
-      fallbackCommands,
-    )
-    .filter(isDefined);
-
   const previousContextStoreCurrentObjectMetadataItem =
     useRecoilComponentValueV2(
       contextStoreCurrentObjectMetadataItemComponentState,
@@ -58,12 +46,6 @@ export const CommandMenu = () => {
     contextStoreCurrentObjectMetadataItemComponentState,
   );
 
-  const selectableItemIds = selectableItems.map((item) => item.id);
-
-  if (isDefined(previousContextStoreCurrentObjectMetadataItem)) {
-    selectableItemIds.unshift(RESET_CONTEXT_TO_SELECTION);
-  }
-
   const commandGroups: CommandGroupConfig[] = [
     {
       heading: t`Copilot`,
@@ -91,6 +73,16 @@ export const CommandMenu = () => {
     },
   ];
 
+  const selectableItems: Command[] = commandGroups.flatMap(
+    (group) => group.items ?? [],
+  );
+
+  const selectableItemIds = selectableItems.map((item) => item.id);
+
+  if (isDefined(previousContextStoreCurrentObjectMetadataItem)) {
+    selectableItemIds.unshift(RESET_CONTEXT_TO_SELECTION);
+  }
+
   return (
     <CommandMenuList
       commandGroups={commandGroups}