NTP: Reset omnibar after form submission (#1819)

noisysocks · web-flow · commit 2c844439b27a · 2025-07-15T20:19:55.000+10:00
* Refactor omnibar to use prop callbacks and reset form on submit

* Rename props and handlers from set*/on* to onChange/handle* for
consistency

* Put back event.preventDefault()

* setTerm -&gt; onChangeTerm

* Fix tests after merge

* Add tabindex to suggestions so that Safari/WebKit fires focus events on
it
diff --git a/special-pages/pages/new-tab/app/omnibar/components/AiChatForm.js b/special-pages/pages/new-tab/app/omnibar/components/AiChatForm.js
@@ -1,23 +1,23 @@
 import { h } from 'preact';
-import { useContext, useRef } from 'preact/hooks';
+import { useRef } from 'preact/hooks';
 import { eventToTarget } from '../../../../../shared/handlers';
 import { ArrowRightIcon } from '../../components/Icons';
 import { usePlatformName } from '../../settings.provider';
 import { useTypedTranslationWith } from '../../types';
 import styles from './AiChatForm.module.css';
-import { OmnibarContext } from './OmnibarProvider';
 
 /**
  * @typedef {import('../strings.json')} Strings
+ * @typedef {import('../../../types/new-tab.js').OpenTarget} OpenTarget
  */
 
 /**
  * @param {object} props
  * @param {string} props.chat
- * @param {(chat: string) => void} props.setChat
+ * @param {(chat: string) => void} props.onChange
+ * @param {(params: { chat: string, target: OpenTarget }) => void} props.onSubmit
  */
-export function AiChatForm({ chat, setChat }) {
-    const { submitChat } = useContext(OmnibarContext);
+export function AiChatForm({ chat, onChange, onSubmit }) {
     const { t } = useTypedTranslationWith(/** @type {Strings} */ ({}));
     const platformName = usePlatformName();
 
@@ -27,21 +27,21 @@ export function AiChatForm({ chat, setChat }) {
     const disabled = chat.length === 0;
 
     /** @type {(event: SubmitEvent) => void} */
-    const onSubmit = (event) => {
+    const handleSubmit = (event) => {
         event.preventDefault();
         if (disabled) return;
-        submitChat({
+        onSubmit({
             chat,
             target: 'same-tab',
         });
     };
 
     /** @type {(event: KeyboardEvent) => void} */
-    const onKeyDown = (event) => {
+    const handleKeyDown = (event) => {
         if (event.key === 'Enter' && !event.shiftKey) {
             event.preventDefault();
             if (disabled) return;
-            submitChat({
+            onSubmit({
                 chat,
                 target: eventToTarget(event, platformName),
             });
@@ -53,14 +53,14 @@ export function AiChatForm({ chat, setChat }) {
         event.preventDefault();
         if (disabled) return;
         event.stopPropagation();
-        submitChat({
+        onSubmit({
             chat,
             target: eventToTarget(event, platformName),
         });
     };
 
     /** @type {(event: import('preact').JSX.TargetedEvent<HTMLTextAreaElement>) => void} */
-    const onChange = (event) => {
+    const handleChange = (event) => {
         const form = formRef.current;
         const textArea = event.currentTarget;
 
@@ -74,11 +74,11 @@ export function AiChatForm({ chat, setChat }) {
             form?.classList.remove(styles.hasScroll);
         }
 
-        setChat(textArea.value);
+        onChange(textArea.value);
     };
 
     return (
-        <form ref={formRef} class={styles.form} onClick={() => textAreaRef.current?.focus()} onSubmit={onSubmit}>
+        <form ref={formRef} class={styles.form} onClick={() => textAreaRef.current?.focus()} onSubmit={handleSubmit}>
             <textarea
                 ref={textAreaRef}
                 class={styles.textarea}
@@ -87,8 +87,8 @@ export function AiChatForm({ chat, setChat }) {
                 aria-label={t('aiChatForm_placeholder')}
                 autoComplete="off"
                 rows={1}
-                onKeyDown={onKeyDown}
-                onChange={onChange}
+                onKeyDown={handleKeyDown}
+                onChange={handleChange}
             />
             <div class={styles.buttons}>
                 <button
diff --git a/special-pages/pages/new-tab/app/omnibar/components/Omnibar.js b/special-pages/pages/new-tab/app/omnibar/components/Omnibar.js
@@ -1,16 +1,19 @@
 import { h } from 'preact';
-import { useState } from 'preact/hooks';
+import { useContext, useState } from 'preact/hooks';
 import { LogoStacked } from '../../components/Icons';
 import { useTypedTranslationWith } from '../../types';
 import { AiChatForm } from './AiChatForm';
 import styles from './Omnibar.module.css';
 import { SearchForm } from './SearchForm';
 import { TabSwitcher } from './TabSwitcher';
 import { Container } from './Container';
+import { OmnibarContext } from './OmnibarProvider';
 
 /**
  * @typedef {import('../strings.json')} Strings
  * @typedef {import('../../../types/new-tab.js').OmnibarConfig} OmnibarConfig
+ * @typedef {import('../../../types/new-tab.js').Suggestion} Suggestion
+ * @typedef {import('../../../types/new-tab.js').OpenTarget} OpenTarget
  */
 
 /**
@@ -22,12 +25,49 @@ import { Container } from './Container';
 export function Omnibar({ mode, setMode, enableAi }) {
     const { t } = useTypedTranslationWith(/** @type {Strings} */ ({}));
     const [query, setQuery] = useState(/** @type {String} */ (''));
+    const [resetKey, setResetKey] = useState(0);
+
+    const { openSuggestion, submitSearch, submitChat } = useContext(OmnibarContext);
+
+    const resetForm = () => {
+        setQuery('');
+        setResetKey((prev) => prev + 1);
+    };
+
+    /** @type {(params: {suggestion: Suggestion, target: OpenTarget}) => void} */
+    const handleOpenSuggestion = (params) => {
+        openSuggestion(params);
+        resetForm();
+    };
+
+    /** @type {(params: {term: string, target: OpenTarget}) => void} */
+    const handleSubmitSearch = (params) => {
+        submitSearch(params);
+        resetForm();
+    };
+
+    /** @type {(params: {chat: string, target: OpenTarget}) => void} */
+    const handleSubmitChat = (params) => {
+        submitChat(params);
+        resetForm();
+    };
+
     return (
         <div class={styles.root} data-mode={mode}>
             <LogoStacked class={styles.logo} aria-label={t('omnibar_logoAlt')} />
-            {enableAi && <TabSwitcher mode={mode} setMode={setMode} />}
+            {enableAi && <TabSwitcher mode={mode} onChange={setMode} />}
             <Container overflow={mode === 'search'}>
-                {mode === 'search' ? <SearchForm term={query} setTerm={setQuery} /> : <AiChatForm chat={query} setChat={setQuery} />}
+                {mode === 'search' ? (
+                    <SearchForm
+                        key={`search-${resetKey}`}
+                        term={query}
+                        onChangeTerm={setQuery}
+                        onOpenSuggestion={handleOpenSuggestion}
+                        onSubmitSearch={handleSubmitSearch}
+                    />
+                ) : (
+                    <AiChatForm key={`chat-${resetKey}`} chat={query} onChange={setQuery} onSubmit={handleSubmitChat} />
+                )}
             </Container>
         </div>
     );
diff --git a/special-pages/pages/new-tab/app/omnibar/components/SearchForm.js b/special-pages/pages/new-tab/app/omnibar/components/SearchForm.js
@@ -1,25 +1,26 @@
 import { h } from 'preact';
-import { useContext, useId } from 'preact/hooks';
+import { useId } from 'preact/hooks';
 import { SearchIcon } from '../../components/Icons.js';
 import { useTypedTranslationWith } from '../../types';
-import { OmnibarContext } from './OmnibarProvider';
 import styles from './SearchForm.module.css';
 import { SuggestionsList } from './SuggestionsList.js';
 import { useSuggestionInput } from './useSuggestionInput.js';
 import { useSuggestions } from './useSuggestions';
 
 /**
  * @typedef {import('../strings.json')} Strings
+ * @typedef {import('../../../types/new-tab.js').Suggestion} Suggestion
+ * @typedef {import('../../../types/new-tab.js').OpenTarget} OpenTarget
  */
 
 /**
  * @param {object} props
  * @param {string} props.term
- * @param {(term: string) => void} props.setTerm
+ * @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, setTerm }) {
-    const { submitSearch } = useContext(OmnibarContext);
-
+export function SearchForm({ term, onChangeTerm, onOpenSuggestion, onSubmitSearch }) {
     const { t } = useTypedTranslationWith(/** @type {Strings} */ ({}));
     const suggestionsListId = useId();
 
@@ -28,30 +29,32 @@ export function SearchForm({ term, setTerm }) {
         selectedSuggestion,
         setSelectedSuggestion,
         clearSelectedSuggestion,
-        inputBase,
-        inputSuggestion,
-        onInputChange,
-        onInputKeyDown,
-        onInputClick,
-        onFormBlur,
+        termBase,
+        termSuggestion,
+        handleChange,
+        handleKeyDown,
+        handleClick,
+        handleBlur,
     } = useSuggestions({
         term,
-        setTerm,
+        onChangeTerm,
+        onOpenSuggestion,
+        onSubmitSearch,
     });
 
-    const inputRef = useSuggestionInput(inputBase, inputSuggestion);
+    const inputRef = useSuggestionInput(termBase, termSuggestion);
 
     /** @type {(event: SubmitEvent) => void} */
-    const onFormSubmit = (event) => {
+    const handleSubmit = (event) => {
         event.preventDefault();
-        submitSearch({
+        onSubmitSearch({
             term,
             target: 'same-tab',
         });
     };
 
     return (
-        <form class={styles.form} onClick={() => inputRef.current?.focus()} onBlur={onFormBlur} onSubmit={onFormSubmit}>
+        <form class={styles.form} onClick={() => inputRef.current?.focus()} onBlur={handleBlur} onSubmit={handleSubmit}>
             <div class={styles.inputContainer}>
                 <SearchIcon inert />
                 <input
@@ -69,18 +72,19 @@ export function SearchForm({ term, setTerm }) {
                     autoComplete="off"
                     autoCorrect="off"
                     autoCapitalize="off"
-                    onChange={onInputChange}
-                    onKeyDown={onInputKeyDown}
-                    onClick={onInputClick}
+                    onChange={handleChange}
+                    onKeyDown={handleKeyDown}
+                    onClick={handleClick}
                 />
             </div>
             {suggestions.length > 0 && (
                 <SuggestionsList
                     id={suggestionsListId}
                     suggestions={suggestions}
                     selectedSuggestion={selectedSuggestion}
-                    setSelectedSuggestion={setSelectedSuggestion}
-                    clearSelectedSuggestion={clearSelectedSuggestion}
+                    onSelectSuggestion={setSelectedSuggestion}
+                    onClearSuggestion={clearSelectedSuggestion}
+                    onOpenSuggestion={onOpenSuggestion}
                 />
             )}
         </form>
diff --git a/special-pages/pages/new-tab/app/omnibar/components/SuggestionsList.js b/special-pages/pages/new-tab/app/omnibar/components/SuggestionsList.js
@@ -1,25 +1,25 @@
 import { h } from 'preact';
-import { useContext } from 'preact/hooks';
 import { eventToTarget } from '../../../../../shared/handlers';
 import { BookmarkIcon, BrowserIcon, FavoriteIcon, GlobeIcon, HistoryIcon, SearchIcon } from '../../components/Icons';
 import { usePlatformName } from '../../settings.provider';
-import { OmnibarContext } from './OmnibarProvider';
 import styles from './SuggestionsList.module.css';
 
 /**
  * @typedef {import('./useSuggestions').SuggestionModel} SuggestionModel
+ * @typedef {import('../../../types/new-tab.js').Suggestion} Suggestion
+ * @typedef {import('../../../types/new-tab.js').OpenTarget} OpenTarget
  */
 
 /**
  * @param {object} props
  * @param {string} props.id
  * @param {SuggestionModel[]} props.suggestions
  * @param {SuggestionModel | null} props.selectedSuggestion
- * @param {(suggestion: SuggestionModel) => void} props.setSelectedSuggestion
- * @param {() => void} props.clearSelectedSuggestion
+ * @param {(suggestion: SuggestionModel) => void} props.onSelectSuggestion
+ * @param {() => void} props.onClearSuggestion
+ * @param {(params: {suggestion: Suggestion, target: OpenTarget}) => void} props.onOpenSuggestion
  */
-export function SuggestionsList({ id, suggestions, selectedSuggestion, setSelectedSuggestion, clearSelectedSuggestion }) {
-    const { openSuggestion } = useContext(OmnibarContext);
+export function SuggestionsList({ id, suggestions, selectedSuggestion, onSelectSuggestion, onClearSuggestion, onOpenSuggestion }) {
     const platformName = usePlatformName();
     return (
         <div role="listbox" id={id} class={styles.list}>
@@ -30,12 +30,13 @@ export function SuggestionsList({ id, suggestions, selectedSuggestion, setSelect
                         role="option"
                         id={suggestion.id}
                         class={styles.item}
+                        tabIndex={suggestion === selectedSuggestion ? 0 : -1}
                         aria-selected={suggestion === selectedSuggestion}
-                        onMouseOver={() => setSelectedSuggestion(suggestion)}
-                        onMouseLeave={() => clearSelectedSuggestion()}
+                        onMouseOver={() => onSelectSuggestion(suggestion)}
+                        onMouseLeave={() => onClearSuggestion()}
                         onClick={(event) => {
                             event.preventDefault();
-                            openSuggestion({ suggestion, target: eventToTarget(event, platformName) });
+                            onOpenSuggestion({ suggestion, target: eventToTarget(event, platformName) });
                         }}
                     >
                         <SuggestionIcon suggestion={suggestion} />
diff --git a/special-pages/pages/new-tab/app/omnibar/components/TabSwitcher.js b/special-pages/pages/new-tab/app/omnibar/components/TabSwitcher.js
@@ -13,20 +13,20 @@ import styles from './TabSwitcher.module.css';
 /**
  * @param {object} props
  * @param {OmnibarConfig['mode']} props.mode
- * @param {(mode: OmnibarConfig['mode']) => void} props.setMode
+ * @param {(mode: OmnibarConfig['mode']) => void} props.onChange
  */
-export function TabSwitcher({ mode, setMode }) {
+export function TabSwitcher({ mode, onChange }) {
     const { t } = useTypedTranslationWith(/** @type {Strings} */ ({}));
     const { main } = useContext(CustomizerThemesContext);
     const Blob = main.value === 'light' ? BlobLight : BlobDark;
     return (
         <div class={styles.tabSwitcher} role="tablist" aria-label={t('omnibar_tabSwitcherLabel')}>
             <Blob class={styles.blob} style={{ translate: mode === 'search' ? 0 : 92 }} />
-            <button class={styles.tab} role="tab" aria-selected={mode === 'search'} onClick={() => setMode('search')}>
+            <button class={styles.tab} role="tab" aria-selected={mode === 'search'} onClick={() => onChange('search')}>
                 {mode === 'search' ? <SearchColorIcon /> : <SearchIcon />}
                 <span class={styles.tabLabel}>{t('omnibar_searchTabLabel')}</span>
             </button>
-            <button class={styles.tab} role="tab" aria-selected={mode === 'ai'} onClick={() => setMode('ai')}>
+            <button class={styles.tab} role="tab" aria-selected={mode === 'ai'} onClick={() => onChange('ai')}>
                 {mode === 'ai' ? <AiChatColorIcon /> : <AiChatIcon />}
                 <span class={styles.tabLabel}>{t('omnibar_aiTabLabel')}</span>
             </button>
diff --git a/special-pages/pages/new-tab/app/omnibar/components/useSuggestions.js b/special-pages/pages/new-tab/app/omnibar/components/useSuggestions.js
diff --git a/special-pages/pages/new-tab/app/omnibar/integration-tests/omnibar.spec.js b/special-pages/pages/new-tab/app/omnibar/integration-tests/omnibar.spec.js
