Replace newlines with spaces when switching from Duck.ai to Search tab. (#1894)

This matches how SERP behaves

Author: noisysocks

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

@@ -27,7 +27,7 @@ export function SearchForm({ autoFocus, onOpenSuggestion, onSubmit }) {
     const platformName = usePlatformName();
 
     const {
-        term,
+        term: _term,
         setTerm,
         suggestionsListId,
         suggestions,
@@ -39,6 +39,9 @@ export function SearchForm({ autoFocus, onOpenSuggestion, onSubmit }) {
         hideSuggestions,
     } = useSearchFormContext();
 
+    // When switching from Duck.ai to Search, there may be newlines in the term. Remove these.
+    const term = _term.replace(/\n/g, ' ');
+
     let inputBase, inputCompletion;
     if (selectedSuggestion) {
         const completionString = getSuggestionCompletionString(selectedSuggestion, term);
@@ -153,8 +156,7 @@ export function SearchForm({ autoFocus, onOpenSuggestion, onSubmit }) {
             {inputSuffix && (
                 <>
                     <span class={styles.suffixSpacer} inert>
-                        {/* Strip newlines to match <input> behaviour which doesn't render them */}
-                        {(inputBase + inputCompletion).replace(/\n/g, '') || t('omnibar_searchFormPlaceholder')}
+                        {inputBase + inputCompletion || t('omnibar_searchFormPlaceholder')}
                     </span>
                     <span class={styles.suffix} inert>
                         {inputSuffixText}

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

@@ -206,6 +206,31 @@ test.describe('omnibar widget', () => {
         await expect(omnibar.searchInput()).toHaveValue('pizza');
     });
 
+    test('mode switching preserves multiline text with proper formatting', 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();
+
+        // Start in Duck.ai mode, type multiline text
+        await omnibar.aiTab().click();
+        await omnibar.expectMode('ai');
+        await omnibar.chatInput().fill('hello\nworld');
+        await expect(omnibar.chatInput()).toHaveValue('hello\nworld');
+
+        // Switch to Search mode - newlines should become spaces
+        await omnibar.searchTab().click();
+        await omnibar.expectMode('search');
+        await expect(omnibar.searchInput()).toHaveValue('hello world');
+
+        // Switch back to Duck.ai mode - newlines should be restored
+        await omnibar.aiTab().click();
+        await omnibar.expectMode('ai');
+        await expect(omnibar.chatInput()).toHaveValue('hello\nworld');
+    });
+
     test('omnibar without AI enabled does not show tab list', async ({ page }, workerInfo) => {
         const ntp = NewtabPage.create(page, workerInfo);
         const omnibar = new OmnibarPage(ntp);