Focus on the input on command menu page change (#10082)

Add effect component to focus on the input on command menu page change

Before:


https://github.com/user-attachments/assets/a066b5b4-d495-42ca-8c13-8cc456eaaeda

After:


https://github.com/user-attachments/assets/1abd06dc-5714-44b5-80e4-22b55dc341c5

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<HTMLInputElement>(null);
 
   const { t } = useLingui();
 
@@ -148,12 +150,15 @@ export const CommandMenuTopBar = () => {
         )}
         {(commandMenuPage === CommandMenuPages.Root ||
           commandMenuPage === CommandMenuPages.SearchRecords) && (
-          <StyledInput
+          <>
-            autoFocus
+            <StyledInput
-            value={commandMenuSearch}
+              ref={inputRef}
-            placeholder={t`Type anything`}
+              value={commandMenuSearch}
-            onChange={handleSearchChange}
+              placeholder={t`Type anything`}
-          />
+              onChange={handleSearchChange}
+            />
+            <CommandMenuTopBarInputFocusEffect inputRef={inputRef} />
+          </>
         )}
       </StyledContentContainer>
       {!isMobile && (

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<HTMLInputElement>;
+};
+
+export const CommandMenuTopBarInputFocusEffect = ({
+  inputRef,
+}: CommandMenuTopBarInputFocusEffectProps) => {
+  const commandMenuPage = useRecoilValue(commandMenuPageState);
+
+  useEffect(() => {
+    if (
+      commandMenuPage === CommandMenuPages.Root ||
+      commandMenuPage === CommandMenuPages.SearchRecords
+    ) {
+      inputRef.current?.focus();
+    }
+  }, [commandMenuPage, inputRef]);
+
+  return null;
+};