From fd3f01ab80691e4f1d9ccf82bc88d9a76853d0bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?=
 <71827178+bosiraphael@users.noreply.github.com>
Date: Fri, 7 Feb 2025 18:56:30 +0100
Subject: [PATCH] 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
---
 .../components/CommandMenuTopBar.tsx          | 19 +++++++++-----
 .../CommandMenuTopBarInputFocusEffect.tsx     | 26 +++++++++++++++++++
 2 files changed, 38 insertions(+), 7 deletions(-)
 create mode 100644 packages/twenty-front/src/modules/command-menu/components/CommandMenuTopBarInputFocusEffect.tsx

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