fix(search): keep cancellation available while editing the draft

Author: waleedlatif1

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

@@ -59,7 +59,6 @@ function SearchField({ userId, initialValue, onSubmit }: SearchFieldProps) {
     setDraft(draftKey, payload)
     setDraft(latestDraftKey, payload)
   }
-  const pending = isSearching && value.trim() === initialValue.trim()
   const submit = (text = value) => {
     if (!text.trim() || (isSearching && text.trim() === initialValue.trim())) return
     const { clearDraft } = useMothershipDraftsStore.getState()
@@ -98,13 +97,13 @@ function SearchField({ userId, initialValue, onSubmit }: SearchFieldProps) {
       submitControl={
         <ComposerActionButton
           type='button'
-          onClick={() => (pending ? void queryClient.cancelQueries({ queryKey }) : submit())}
-          disabled={!canSubmit}
-          aria-label={pending ? 'Stop search' : 'Search'}
-          aria-busy={pending}
-          active={canSubmit}
+          onClick={() => (isSearching ? void queryClient.cancelQueries({ queryKey }) : submit())}
+          disabled={!canSubmit && !isSearching}
+          aria-label={isSearching ? 'Stop search' : 'Search'}
+          aria-busy={isSearching}
+          active={canSubmit || isSearching}
         >
-          {pending ? (
+          {isSearching ? (
             <StopFilled className='block size-[14px] fill-white dark:fill-black' />
           ) : (
             <ArrowUp className='block size-[16px] text-white dark:text-black' />

apps/sim/app/workspace/[workspaceId]/home/components/knowledge-search-results/search-transitions.test.tsx

@@ -272,31 +272,59 @@ describe('search refinement with the real query cache and URL state', () => {
 })
 
 describe('live search submission feedback', () => {
-  it('cancels a pending search without accepting its late response and allows a fresh submission', async () => {
-    const shape = resolveDeploymentShape()
-    seedDeploymentShape({ ...shape, features: { ...shape.features, liveEnterpriseSearch: true } })
-    await render({ organizationPage: true, params: '?q=launch' })
-    await act(async () => {
-      await vi.advanceTimersByTimeAsync(1)
-    })
-    expect(requests).toHaveLength(1)
-    await act(async () => {
-      const stop = container.querySelector<HTMLButtonElement>('button[aria-label="Stop search"]')
-      if (!stop) throw new Error('No stop control for the pending search')
-      stop.click()
-      await vi.advanceTimersByTimeAsync(1)
-    })
-    expect(requests[0].signal.aborted).toBe(true)
-    await complete(0, { title: 'Cancelled result' })
-    expect(container.querySelector('[data-source-link]')).toBeNull()
-    await act(async () => {
-      container.querySelector<HTMLButtonElement>('button[aria-label="Search"]')!.click()
-      await vi.advanceTimersByTimeAsync(1)
-    })
-    expect(requests).toHaveLength(2)
-    await complete(1, { title: 'Fresh result' })
-    expect(container.querySelector('[data-source-link]')?.textContent).toBe('Fresh result')
-  })
+  it.each(['launch', 'edited draft', ''])(
+    'cancels with draft %j, ignores late results, and allows a fresh submission',
+    async (draft) => {
+      const shape = resolveDeploymentShape()
+      seedDeploymentShape({ ...shape, features: { ...shape.features, liveEnterpriseSearch: true } })
+      await render({ organizationPage: true, params: '?q=launch' })
+      await act(async () => {
+        await vi.advanceTimersByTimeAsync(1)
+      })
+      expect(requests).toHaveLength(1)
+      await act(async () => {
+        const input = container.querySelector('textarea')!
+        Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value')!.set!.call(
+          input,
+          draft
+        )
+        input.dispatchEvent(new Event('input', { bubbles: true }))
+      })
+      await act(async () => {
+        const stop = container.querySelector<HTMLButtonElement>('button[aria-label="Stop search"]')
+        if (!stop) throw new Error('No stop control for the pending search')
+        stop.click()
+        await vi.advanceTimersByTimeAsync(1)
+      })
+      expect(requests[0].signal.aborted).toBe(true)
+      expect(container.querySelector('textarea')!.value).toBe(draft)
+      await complete(0, { title: 'Cancelled result' })
+      expect(
+        client
+          .getQueriesData({ queryKey: knowledgeKeys.searches() })
+          .every(([, data]) => data === undefined)
+      ).toBe(true)
+      await act(async () => {
+        const input = container.querySelector('textarea')!
+        Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value')!.set!.call(
+          input,
+          'launch'
+        )
+        input.dispatchEvent(new Event('input', { bubbles: true }))
+      })
+      await act(async () => {
+        container.querySelector<HTMLButtonElement>('button[aria-label="Search"]')!.click()
+        await vi.advanceTimersByTimeAsync(1)
+      })
+      expect(requests).toHaveLength(2)
+      await complete(1, { title: 'Fresh result' })
+      expect(
+        client
+          .getQueriesData<WorkspaceKnowledgeSearchData>({ queryKey: knowledgeKeys.searches() })
+          .flatMap(([, data]) => data?.results.map((result) => result.documentId) ?? [])
+      ).toEqual(['Fresh result'])
+    }
+  )
 
   it('acknowledges the submitted query before exposing refinement controls', async () => {
     const shape = resolveDeploymentShape()