diff --git a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts b/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts index cf9af6747..1b203c0e5 100644 --- a/packages/twenty-front/src/modules/command-menu/hooks/useCommandMenu.ts +++ b/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(); }; diff --git a/packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/useSelectableList.ts b/packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/useSelectableList.ts index 1f09977b3..c477277c9 100644 --- a/packages/twenty-front/src/modules/ui/layout/selectable-list/hooks/useSelectableList.ts +++ b/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, }; };