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 }) =>