Fix command menu selection (#10248)

- Created a state `hasUserSelectedCommandState` : This state is set to
`true` when the user selects an element in the command menu list. It is
set to false upon redirection or when the command menu is closed.
- Modified `CommandMenuDefaultSelectionEffect` to have the expected
selection behavior for the command menu

packages/twenty-front/src/modules/command-menu/components/CommandMenuDefaultSelectionEffect.tsx

@@ -1,3 +1,4 @@
+import { hasUserSelectedCommandState } from '@/command-menu/states/hasUserSelectedCommandState';
 import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
 import { useEffect } from 'react';
 import { useRecoilValue } from 'recoil';
@@ -13,10 +14,13 @@ export const CommandMenuDefaultSelectionEffect = ({
 
   const selectedItemId = useRecoilValue(selectedItemIdState);
 
+  const hasUserSelectedCommand = useRecoilValue(hasUserSelectedCommandState);
+
   useEffect(() => {
     if (
       isDefined(selectedItemId) &&
-      selectableItemIds.includes(selectedItemId)
+      selectableItemIds.includes(selectedItemId) &&
+      hasUserSelectedCommand
     ) {
       return;
     }
@@ -24,7 +28,12 @@ export const CommandMenuDefaultSelectionEffect = ({
     if (selectableItemIds.length > 0) {
       setSelectedItemId(selectableItemIds[0]);
     }
-  }, [selectableItemIds, selectedItemId, setSelectedItemId]);
+  }, [
+    hasUserSelectedCommand,
+    selectableItemIds,
+    selectedItemId,
+    setSelectedItemId,
+  ]);
 
   return null;
 };

packages/twenty-front/src/modules/command-menu/components/CommandMenuList.tsx

@@ -7,11 +7,13 @@ import { COMMAND_MENU_SEARCH_BAR_PADDING } from '@/command-menu/constants/Comman
 import { RESET_CONTEXT_TO_SELECTION } from '@/command-menu/constants/ResetContextToSelection';
 import { useCommandMenuOnItemClick } from '@/command-menu/hooks/useCommandMenuOnItemClick';
 import { useResetPreviousCommandMenuContext } from '@/command-menu/hooks/useResetPreviousCommandMenuContext';
+import { hasUserSelectedCommandState } from '@/command-menu/states/hasUserSelectedCommandState';
 import { SelectableItem } from '@/ui/layout/selectable-list/components/SelectableItem';
 import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
 import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 import styled from '@emotion/styled';
+import { useSetRecoilState } from 'recoil';
 import { isDefined } from 'twenty-shared';
 import { MOBILE_VIEWPORT } from 'twenty-ui';
 
@@ -75,6 +77,10 @@ export const CommandMenuList = ({
   const { resetPreviousCommandMenuContext } =
     useResetPreviousCommandMenuContext();
 
+  const setHasUserSelectedCommand = useSetRecoilState(
+    hasUserSelectedCommandState,
+  );
+
   return (
     <>
       <CommandMenuDefaultSelectionEffect
@@ -109,6 +115,9 @@ export const CommandMenuList = ({
                   });
                 }
               }}
+              onSelect={() => {
+                setHasUserSelectedCommand(true);
+              }}
             >
               {children}
               {commandGroups.map(({ heading, items }) =>

packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts

@@ -13,6 +13,7 @@ import {
 } from '@/command-menu/states/commandMenuNavigationStackState';
 import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState';
 import { commandMenuPageInfoState } from '@/command-menu/states/commandMenuPageTitle';
+import { hasUserSelectedCommandState } from '@/command-menu/states/hasUserSelectedCommandState';
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
 import { contextStoreCurrentViewTypeComponentState } from '@/context-store/states/contextStoreCurrentViewTypeComponentState';
 import { contextStoreFiltersComponentState } from '@/context-store/states/contextStoreFiltersComponentState';
@@ -60,6 +61,7 @@ export const useCommandMenu = () => {
 
         set(isCommandMenuOpenedState, true);
         setHotkeyScopeAndMemorizePreviousScope(AppHotkeyScope.CommandMenuOpen);
+        set(hasUserSelectedCommandState, false);
       },
     [
       copyContextStoreStates,
@@ -89,6 +91,7 @@ export const useCommandMenu = () => {
           set(commandMenuSearchState, '');
           set(commandMenuNavigationStackState, []);
           resetSelectedItem();
+          set(hasUserSelectedCommandState, false);
           goBackToPreviousHotkeyScope();
 
           emitRightDrawerCloseEvent();
@@ -173,6 +176,7 @@ export const useCommandMenu = () => {
         });
 
         set(commandMenuNavigationStackState, newNavigationStack);
+        set(hasUserSelectedCommandState, false);
       };
     },
     [closeCommandMenu],
@@ -201,6 +205,8 @@ export const useCommandMenu = () => {
         title: newNavigationStackItem?.pageTitle,
         Icon: newNavigationStackItem?.pageIcon,
       });
+
+      set(hasUserSelectedCommandState, false);
     };
   }, []);
 
@@ -270,6 +276,8 @@ export const useCommandMenu = () => {
           title: undefined,
           Icon: undefined,
         });
+
+        set(hasUserSelectedCommandState, false);
       };
     },
     [copyContextStoreStates],

packages/twenty-front/src/modules/command-menu/states/hasUserSelectedCommandState.ts

@@ -0,0 +1,6 @@
+import { createState } from 'twenty-ui';
+
+export const hasUserSelectedCommandState = createState({
+  key: 'hasUserSelectedCommandState',
+  defaultValue: false,
+});

packages/twenty-front/src/modules/ui/layout/selectable-list/components/SelectableList.tsx

@@ -23,8 +23,9 @@ export const SelectableList = ({
   selectableItemIdArray,
   selectableItemIdMatrix,
   onEnter,
+  onSelect,
 }: SelectableListProps) => {
-  useSelectableListHotKeys(selectableListId, hotkeyScope);
+  useSelectableListHotKeys(selectableListId, hotkeyScope, onSelect);
 
   const { setSelectableItemIds, setSelectableListOnEnter, setSelectedItemId } =
     useSelectableList(selectableListId);

packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/internal/useSelectableListHotKeys.ts

@@ -11,6 +11,7 @@ type Direction = 'up' | 'down' | 'left' | 'right';
 export const useSelectableListHotKeys = (
   scopeId: string,
   hotkeyScope: string,
+  onSelect?: (itemId: string) => void,
 ) => {
   const findPosition = (
     selectableItemIds: string[][],
@@ -105,6 +106,7 @@ export const useSelectableListHotKeys = (
           if (isNonEmptyString(nextId)) {
             set(isSelectedItemIdSelector(nextId), true);
             set(selectedItemIdState, nextId);
+            onSelect?.(nextId);
           }
 
           if (isNonEmptyString(selectedItemId)) {
@@ -112,7 +114,12 @@ export const useSelectableListHotKeys = (
           }
         }
       },
-    [isSelectedItemIdSelector, selectableItemIdsState, selectedItemIdState],
+    [
+      isSelectedItemIdSelector,
+      onSelect,
+      selectableItemIdsState,
+      selectedItemIdState,
+    ],
   );
 
   useScopedHotkeys(Key.ArrowUp, () => handleSelect('up'), hotkeyScope, []);