fix(tables): block find navigation until the results describe the term

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-find.test.tsx

@@ -62,6 +62,7 @@ function render(overrides: Partial<TableFindProps> = {}) {
     onSubmit: vi.fn(),
     onClose: vi.fn(),
     isStale: false,
+    canNavigate: true,
     count: 0,
     currentIndex: 0,
     truncated: false,
@@ -152,6 +153,25 @@ describe('TableFind keyboard', () => {
     expect(props.onNext).not.toHaveBeenCalled()
   })
 
+  // Committing makes the typed and submitted terms agree instantly, but the
+  // matches on screen still belong to the previous term until the request
+  // lands — stepping there would select a cell the box no longer names.
+  it('does not step while the committed term is still loading', () => {
+    const props = render({ query: 'abcd', count: 3, isStale: false, canNavigate: false })
+    press('Enter')
+    expect(props.onNext).not.toHaveBeenCalled()
+    expect(props.onSubmit).not.toHaveBeenCalled()
+
+    press('Enter', { shiftKey: true })
+    expect(props.onPrev).not.toHaveBeenCalled()
+  })
+
+  it('disables the arrows until the results describe the term', () => {
+    render({ query: 'abcd', count: 3, canNavigate: false })
+    expect(buttonByLabel('Next match').disabled).toBe(true)
+    expect(buttonByLabel('Previous match').disabled).toBe(true)
+  })
+
   it('closes on Escape', () => {
     const props = render({ query: 'a', count: 3 })
     press('Escape')

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-find.tsx

@@ -13,8 +13,15 @@ export interface TableFindProps {
   /** Adopts the typed term immediately, skipping the debounce. */
   onSubmit: () => void
   onClose: () => void
-  /** Whether the results on screen still describe an older term. */
+  /** Whether the typed term has yet to be searched, so Enter should commit it. */
   isStale: boolean
+  /**
+   * Whether the matches on screen belong to the term that was searched. False
+   * while a term's own results are in flight, when the count still describes
+   * the previous term and stepping through it would land on a cell the box no
+   * longer names.
+   */
+  canNavigate: boolean
   /** Number of matches after dropping columns not in the current view. */
   count: number
   /** 0-based index of the active match. Ignored when `count` is 0. */
@@ -38,6 +45,7 @@ export const TableFind = memo(function TableFind({
   onSubmit,
   onClose,
   isStale,
+  canNavigate,
   count,
   currentIndex,
   truncated,
@@ -47,9 +55,12 @@ export const TableFind = memo(function TableFind({
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter') {
       e.preventDefault()
-      // Committing beats stepping while the matches on screen belong to an
-      // older term — stepping there navigates results the box no longer shows.
+      // Commit an unsearched term; otherwise step — but only once the results
+      // describe it. In between (committed, still loading) Enter does nothing
+      // rather than walk the previous term's matches; the auto-reveal lands on
+      // the first hit as soon as they arrive.
       if (isStale) onSubmit()
+      else if (!canNavigate) return
       else if (e.shiftKey) onPrev()
       else onNext()
       return
@@ -62,6 +73,7 @@ export const TableFind = memo(function TableFind({
 
   const hasQuery = query.trim().length > 0
   const hasMatches = count > 0
+  const navEnabled = hasMatches && canNavigate
 
   /** The tally holds its last value while the next result set loads — blanking
    *  it on every keystroke reads as the feature breaking rather than working. */
@@ -120,7 +132,7 @@ export const TableFind = memo(function TableFind({
         className='size-6 shrink-0'
         aria-label='Previous match'
         title='Previous match (Shift+Enter)'
-        disabled={!hasMatches}
+        disabled={!navEnabled}
         onClick={onPrev}
       >
         <ChevronUp className='size-[13px]' />
@@ -132,7 +144,7 @@ export const TableFind = memo(function TableFind({
         className='size-6 shrink-0'
         aria-label='Next match'
         title='Next match (Enter)'
-        disabled={!hasMatches}
+        disabled={!navEnabled}
         onClick={onNext}
       >
         <ChevronDown className='size-[13px]' />

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-grid.tsx

@@ -1197,8 +1197,25 @@ export function TableGrid({
     return byRow
   }, [findMatches])
 
+  /**
+   * Whether the matches on screen actually belong to the submitted term.
+   *
+   * False while a term's own results are still in flight — `keepPreviousData`
+   * keeps serving the PREVIOUS term's matches until they land, and the first
+   * search of a session has no data at all. Navigation is gated on this:
+   * committing with Enter makes the typed and submitted terms agree instantly,
+   * so without it a second Enter would step through the old term's matches.
+   *
+   * A background refetch of the SAME term keeps this true — its data is still
+   * for this key — so an SSE row update doesn't disable the arrows mid-search.
+   */
+  const findResultsAreCurrent =
+    submittedQuery.length > 0 && findData !== undefined && !isFindPlaceholder
+
   const findMatchesRef = useRef(findMatches)
   findMatchesRef.current = findMatches
+  const findResultsAreCurrentRef = useRef(findResultsAreCurrent)
+  findResultsAreCurrentRef.current = findResultsAreCurrent
   const currentMatchIndexRef = useRef(currentMatchIndex)
   currentMatchIndexRef.current = currentMatchIndex
   const findOpenRef = useRef(findOpen)
@@ -1324,11 +1341,13 @@ export function TableGrid({
    * would only come back around after wrapping the whole list.
    */
   const handleFindNext = useCallback(() => {
+    if (!findResultsAreCurrentRef.current) return
     const index = currentMatchIndexRef.current
     goToMatch(cursorIsOnMatchRef.current ? index + 1 : index)
   }, [goToMatch])
 
   const handleFindPrev = useCallback(() => {
+    if (!findResultsAreCurrentRef.current) return
     const index = currentMatchIndexRef.current
     goToMatch(cursorIsOnMatchRef.current ? index - 1 : index)
   }, [goToMatch])
@@ -4401,6 +4420,7 @@ export function TableGrid({
             onSubmit={handleFindSubmit}
             onClose={handleFindClose}
             isStale={trimmedFindQuery !== submittedQuery}
+            canNavigate={findResultsAreCurrent}
             count={findMatches.length}
             // Clamped, not stored: a background refetch of the same term can
             // shrink the match set under a cursor the user already paged, and