diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuTopBar.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuTopBar.tsx index 4d1355657..c3fd69d38 100644 --- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuTopBar.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuTopBar.tsx @@ -1,6 +1,7 @@ import { CommandMenuContextChip } from '@/command-menu/components/CommandMenuContextChip'; import { CommandMenuContextChipGroups } from '@/command-menu/components/CommandMenuContextChipGroups'; import { CommandMenuContextChipGroupsWithRecordSelection } from '@/command-menu/components/CommandMenuContextChipGroupsWithRecordSelection'; +import { CommandMenuTopBarInputFocusEffect } from '@/command-menu/components/CommandMenuTopBarInputFocusEffect'; import { COMMAND_MENU_SEARCH_BAR_HEIGHT } from '@/command-menu/constants/CommandMenuSearchBarHeight'; import { COMMAND_MENU_SEARCH_BAR_PADDING } from '@/command-menu/constants/CommandMenuSearchBarPadding'; import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu'; @@ -14,7 +15,7 @@ import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { useLingui } from '@lingui/react/macro'; -import { useMemo } from 'react'; +import { useMemo, useRef } from 'react'; import { useRecoilState, useRecoilValue } from 'recoil'; import { isDefined } from 'twenty-shared'; import { @@ -83,6 +84,7 @@ export const CommandMenuTopBar = () => { const [commandMenuSearch, setCommandMenuSearch] = useRecoilState( commandMenuSearchState, ); + const inputRef = useRef(null); const { t } = useLingui(); @@ -148,12 +150,15 @@ export const CommandMenuTopBar = () => { )} {(commandMenuPage === CommandMenuPages.Root || commandMenuPage === CommandMenuPages.SearchRecords) && ( - + <> + + + )} {!isMobile && ( diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuTopBarInputFocusEffect.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuTopBarInputFocusEffect.tsx new file mode 100644 index 000000000..74da53d42 --- /dev/null +++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuTopBarInputFocusEffect.tsx @@ -0,0 +1,26 @@ +import { useRecoilValue } from 'recoil'; + +import { commandMenuPageState } from '@/command-menu/states/commandMenuPageState'; +import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages'; +import { useEffect } from 'react'; + +type CommandMenuTopBarInputFocusEffectProps = { + inputRef: React.RefObject; +}; + +export const CommandMenuTopBarInputFocusEffect = ({ + inputRef, +}: CommandMenuTopBarInputFocusEffectProps) => { + const commandMenuPage = useRecoilValue(commandMenuPageState); + + useEffect(() => { + if ( + commandMenuPage === CommandMenuPages.Root || + commandMenuPage === CommandMenuPages.SearchRecords + ) { + inputRef.current?.focus(); + } + }, [commandMenuPage, inputRef]); + + return null; +};