Move focus to input when switching Omnibar tabs (#1823)

Author: noisysocks

special-pages/pages/new-tab/app/omnibar/components/AiChatForm.js

@@ -1,5 +1,5 @@
 import { h } from 'preact';
-import { useRef } from 'preact/hooks';
+import { useEffect, useRef } from 'preact/hooks';
 import { eventToTarget } from '../../../../../shared/handlers';
 import { ArrowRightIcon } from '../../components/Icons';
 import { usePlatformName } from '../../settings.provider';
@@ -14,16 +14,23 @@ import styles from './AiChatForm.module.css';
 /**
  * @param {object} props
  * @param {string} props.chat
+ * @param {boolean} [props.autoFocus]
  * @param {(chat: string) => void} props.onChange
  * @param {(params: { chat: string, target: OpenTarget }) => void} props.onSubmit
  */
-export function AiChatForm({ chat, onChange, onSubmit }) {
+export function AiChatForm({ chat, autoFocus, onChange, onSubmit }) {
     const { t } = useTypedTranslationWith(/** @type {Strings} */ ({}));
     const platformName = usePlatformName();
 
     const formRef = useRef(/** @type {HTMLFormElement|null} */ (null));
     const textAreaRef = useRef(/** @type {HTMLTextAreaElement|null} */ (null));
 
+    useEffect(() => {
+        if (autoFocus && textAreaRef.current) {
+            textAreaRef.current.focus();
+        }
+    }, [autoFocus]);
+
     const disabled = chat.length === 0;
 
     /** @type {(event: SubmitEvent) => void} */

special-pages/pages/new-tab/app/omnibar/components/Omnibar.js

@@ -3,11 +3,11 @@ import { useContext, useState } from 'preact/hooks';
 import { LogoStacked } from '../../components/Icons';
 import { useTypedTranslationWith } from '../../types';
 import { AiChatForm } from './AiChatForm';
+import { Container } from './Container';
 import styles from './Omnibar.module.css';
+import { OmnibarContext } from './OmnibarProvider';
 import { SearchForm } from './SearchForm';
 import { TabSwitcher } from './TabSwitcher';
-import { Container } from './Container';
-import { OmnibarContext } from './OmnibarProvider';
 
 /**
  * @typedef {import('../strings.json')} Strings
@@ -26,6 +26,7 @@ export function Omnibar({ mode, setMode, enableAi }) {
     const { t } = useTypedTranslationWith(/** @type {Strings} */ ({}));
     const [query, setQuery] = useState(/** @type {String} */ (''));
     const [resetKey, setResetKey] = useState(0);
+    const [autoFocus, setAutoFocus] = useState(false);
 
     const { openSuggestion, submitSearch, submitChat } = useContext(OmnibarContext);
 
@@ -52,21 +53,34 @@ export function Omnibar({ mode, setMode, enableAi }) {
         resetForm();
     };
 
+    /** @type {(mode: OmnibarConfig['mode']) => void} */
+    const handleChangeMode = (nextMode) => {
+        setAutoFocus(true);
+        setMode(nextMode);
+    };
+
     return (
         <div class={styles.root} data-mode={mode}>
             <LogoStacked class={styles.logo} aria-label={t('omnibar_logoAlt')} />
-            {enableAi && <TabSwitcher mode={mode} onChange={setMode} />}
+            {enableAi && <TabSwitcher mode={mode} onChange={handleChangeMode} />}
             <Container overflow={mode === 'search'}>
                 {mode === 'search' ? (
                     <SearchForm
                         key={`search-${resetKey}`}
                         term={query}
+                        autoFocus={autoFocus}
                         onChangeTerm={setQuery}
                         onOpenSuggestion={handleOpenSuggestion}
                         onSubmitSearch={handleSubmitSearch}
                     />
                 ) : (
-                    <AiChatForm key={`chat-${resetKey}`} chat={query} onChange={setQuery} onSubmit={handleSubmitChat} />
+                    <AiChatForm
+                        key={`chat-${resetKey}`}
+                        chat={query}
+                        autoFocus={autoFocus}
+                        onChange={setQuery}
+                        onSubmit={handleSubmitChat}
+                    />
                 )}
             </Container>
         </div>

special-pages/pages/new-tab/app/omnibar/components/SearchForm.js

@@ -1,5 +1,5 @@
 import { h } from 'preact';
-import { useId } from 'preact/hooks';
+import { useEffect, useId } from 'preact/hooks';
 import { SearchIcon } from '../../components/Icons.js';
 import { useTypedTranslationWith } from '../../types';
 import styles from './SearchForm.module.css';
@@ -16,11 +16,12 @@ import { useSuggestions } from './useSuggestions';
 /**
  * @param {object} props
  * @param {string} props.term
+ * @param {boolean} [props.autoFocus]
  * @param {(term: string) => void} props.onChangeTerm
  * @param {(params: {suggestion: Suggestion, target: OpenTarget}) => void} props.onOpenSuggestion
  * @param {(params: {term: string, target: OpenTarget}) => void} props.onSubmitSearch
  */
-export function SearchForm({ term, onChangeTerm, onOpenSuggestion, onSubmitSearch }) {
+export function SearchForm({ term, autoFocus, onChangeTerm, onOpenSuggestion, onSubmitSearch }) {
     const { t } = useTypedTranslationWith(/** @type {Strings} */ ({}));
     const suggestionsListId = useId();
 
@@ -44,6 +45,12 @@ export function SearchForm({ term, onChangeTerm, onOpenSuggestion, onSubmitSearc
 
     const inputRef = useSuggestionInput(termBase, termSuggestion);
 
+    useEffect(() => {
+        if (autoFocus && inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, [autoFocus]);
+
     /** @type {(event: SubmitEvent) => void} */
     const handleSubmit = (event) => {
         event.preventDefault();

special-pages/pages/new-tab/app/omnibar/integration-tests/omnibar.spec.js

@@ -249,6 +249,28 @@ test.describe('omnibar widget', () => {
         await omnibar.expectSelectedSuggestion('pizza dough recipe');
     });
 
+    test('focus is moved to the active input on tab switch', async ({ page }, workerInfo) => {
+        const ntp = NewtabPage.create(page, workerInfo);
+        const omnibar = new OmnibarPage(ntp);
+        await ntp.reducedMotion();
+        await ntp.openPage({ additional: { omnibar: true } });
+        await omnibar.ready();
+
+        // Initial state: Search tab is selected and the input should NOT be focused
+        await omnibar.expectMode('search');
+        await expect(omnibar.searchInput()).not.toBeFocused();
+
+        // Switch to Duck.ai tab and expect focus to move
+        await omnibar.aiTab().click();
+        await omnibar.expectMode('ai');
+        await expect(omnibar.chatInput()).toBeFocused();
+
+        // Then switch back to Search tab and expect focus to move
+        await omnibar.searchTab().click();
+        await omnibar.expectMode('search');
+        await expect(omnibar.searchInput()).toBeFocused();
+    });
+
     test('suggestions list arrow up navigation', async ({ page }, workerInfo) => {
         const ntp = NewtabPage.create(page, workerInfo);
         const omnibar = new OmnibarPage(ntp);