fix(search): wait for hydration before editing queries

Author: waleedlatif1

apps/sim/app/o/[organizationId]/components/search-input-bar.tsx

@@ -16,6 +16,7 @@ import { InputToolbar } from '@/app/workspace/[workspaceId]/home/components/user
 interface SearchInputBarProps {
   inputRef: RefObject<HTMLTextAreaElement | null>
   value: string
+  disabled?: boolean
   onChange: (value: string) => void
   onSubmit: () => void
   onPaste?: ClipboardEventHandler<HTMLTextAreaElement>
@@ -36,6 +37,7 @@ export function SearchInputBar({
   attachments,
   inputRef,
   value,
+  disabled = false,
   onChange,
   onSubmit,
   onPaste,
@@ -106,6 +108,7 @@ export function SearchInputBar({
             inputRef={inputRef}
             scrollerRef={scrollerRef}
             value={value}
+            disabled={disabled}
             compact={!hasAttachments && !expanded}
             className={hasAttachments ? 'min-h-[56px]' : undefined}
             maxHeight={200}

apps/sim/app/o/[organizationId]/search/search.tsx

@@ -26,6 +26,7 @@ import { MicButton } from '@/app/workspace/[workspaceId]/home/components/user-in
 import { MicrophonePermissionHelp } from '@/app/workspace/[workspaceId]/home/components/user-input/components/microphone-permission-help/microphone-permission-help'
 import { HomeFallback } from '@/app/workspace/[workspaceId]/home/home-fallback'
 import { knowledgeKeys } from '@/hooks/queries/utils/knowledge-keys'
+import { useHydrated } from '@/hooks/use-hydrated'
 import { useVoiceInput } from '@/hooks/use-voice-input'
 import { useMothershipDraftsStore } from '@/stores/mothership-drafts/store'
 
@@ -54,6 +55,7 @@ interface SearchFieldProps {
 /** Search commits a query on submit while retaining an independent editable draft. */
 function SearchField({ userId, initialValue, onSubmit }: SearchFieldProps) {
   const inputRef = useRef<HTMLTextAreaElement>(null)
+  const hydrated = useHydrated()
   const { organization } = useOrganizationContext()
   const queryClient = useQueryClient()
   const queryKey = knowledgeKeys.searchQuery(
@@ -90,14 +92,17 @@ function SearchField({ userId, initialValue, onSubmit }: SearchFieldProps) {
     getValue: () => value,
     onChange: setValue,
   })
-  const canSubmit = value.trim().length > 0
+  const canSubmit = hydrated && value.trim().length > 0
 
-  useEffect(() => inputRef.current?.focus(), [])
+  useEffect(() => {
+    if (hydrated) inputRef.current?.focus()
+  }, [hydrated])
 
   const field = (
     <SearchInputBar
       inputRef={inputRef}
       value={value}
+      disabled={!hydrated}
       onChange={setValue}
       onSubmit={() => submit()}
       floating={!initialValue.trim()}

apps/sim/scripts/test-organization-search-e2e.ts

@@ -715,17 +715,37 @@ try {
     await expect(page).toHaveURL(`${baseUrl.origin}${root}/search/chat/${assistantId}`)
     await expect(page.getByText(answer, { exact: true })).toBeVisible()
   })
-  await check('New search clears its draft while Back restores the prior query draft', async () => {
-    await page.goto(`${baseUrl.origin}${root}/search?q=Launch`)
-    const input = page.getByRole('textbox', { name: 'Search your sources' })
-    await input.fill('Edited launch query')
-    await page.getByRole('button', { name: 'New search', exact: true }).click()
-    await expect(page).toHaveURL(`${baseUrl.origin}${root}/search`)
-    await expect(input).toHaveValue('')
-    await page.goBack()
-    await expect(input).toHaveValue('Edited launch query')
-    assert.equal(new URL(page.url()).searchParams.get('q'), 'Launch')
-  })
+  await check(
+    'Search protects edits during hydration and restores the prior draft on Back',
+    async () => {
+      const releaseScripts = createDeferred<void>()
+      const scripts = '**/_next/static/**/*.js'
+      await page.route(scripts, async (route) => {
+        await releaseScripts.promise
+        await route.continue()
+      })
+      const input = page.getByRole('textbox', { name: 'Search your sources' })
+      try {
+        await page.goto(`${baseUrl.origin}${root}/search?q=Launch`, { waitUntil: 'commit' })
+        await expect(input).toBeVisible()
+        await expect(input).toBeDisabled()
+        await expect(page.getByLabel('Search', { exact: true })).toBeDisabled()
+      } finally {
+        releaseScripts.resolve()
+        await page.unrouteAll({ behavior: 'wait' })
+        await page.waitForLoadState()
+      }
+      await expect(input).toBeFocused()
+      await input.fill('Edited launch query')
+      await expect(input).toHaveValue('Edited launch query')
+      await page.getByRole('button', { name: 'New search', exact: true }).click()
+      await expect(page).toHaveURL(`${baseUrl.origin}${root}/search`)
+      await expect(input).toHaveValue('')
+      await page.goBack()
+      await expect(input).toHaveValue('Edited launch query')
+      assert.equal(new URL(page.url()).searchParams.get('q'), 'Launch')
+    }
+  )
   await check('Search URLs cannot change an agent conversation into an assistant', async () => {
     await page.goto(`${baseUrl.origin}${root}/search/chat/${agentId}`)
     await expect(page).toHaveURL(`${baseUrl.origin}${root}/chat/${agentId}`)