2982-feat: Clear SelectableList reset scoped state (#2987)

* 2982-feat: Clear SelectableList reset scoped state

* State fixes as suggested in pr

* State fixes as suggested in pr

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

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

@@ -2,6 +2,7 @@ import { useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useRecoilCallback, useSetRecoilState } from 'recoil';
 
+import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
 import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
 
@@ -14,6 +15,9 @@ export const useCommandMenu = () => {
   const navigate = useNavigate();
   const setIsCommandMenuOpened = useSetRecoilState(isCommandMenuOpenedState);
   const setCommands = useSetRecoilState(commandMenuCommandsState);
+  const { resetSelectedItem } = useSelectableList({
+    selectableListId: 'command-menu-list',
+  });
   const {
     setHotkeyScopeAndMemorizePreviousScope,
     goBackToPreviousHotkeyScope,
@@ -26,6 +30,7 @@ export const useCommandMenu = () => {
 
   const closeCommandMenu = () => {
     setIsCommandMenuOpened(false);
+    resetSelectedItem();
     goBackToPreviousHotkeyScope();
   };
 

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

@@ -1,4 +1,4 @@
-import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil';
 
 import { useSelectableListScopedStates } from '@/ui/layout/selectable-list/hooks/internal/useSelectableListScopedStates';
 import { SelectableListScopeInternalContext } from '@/ui/layout/selectable-list/scopes/scope-internal-context/SelectableListScopeInternalContext';
@@ -19,6 +19,7 @@ export const useSelectableList = (props?: UseSelectableListProps) => {
     selectableItemIdsState,
     isSelectedItemIdSelector,
     selectableListOnEnterState,
+    selectedItemIdState,
   } = useSelectableListScopedStates({
     selectableListScopeId: scopeId,
     itemId: props?.itemId,
@@ -30,11 +31,22 @@ export const useSelectableList = (props?: UseSelectableListProps) => {
   );
   const isSelectedItemId = useRecoilValue(isSelectedItemIdSelector);
 
+  const resetSelectedItemIdState = useResetRecoilState(selectedItemIdState);
+  const resetIsSelectedItemIdSelector = useResetRecoilState(
+    isSelectedItemIdSelector,
+  );
+
+  const resetSelectedItem = () => {
+    resetSelectedItemIdState();
+    resetIsSelectedItemIdSelector();
+  };
+
   return {
     setSelectableItemIds,
     isSelectedItemId,
     setSelectableListOnEnter,
     selectableListId: scopeId,
     isSelectedItemIdSelector,
+    resetSelectedItem,
   };
 };