feat(tables): apply filter text on enter or blur instead of a debounce

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: j15z

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/index.ts

@@ -1 +1 @@
-export { TableFilter, type TableFilterHandle } from './table-filter'
+export { TableFilter } from './table-filter'

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

@@ -1,15 +1,11 @@
 /**
  * @vitest-environment jsdom
  */
-import { act, createRef, type Ref } from 'react'
+import { act } from 'react'
 import { createRoot, type Root } from 'react-dom/client'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import type { ColumnDefinition, TablePredicate } from '@/lib/table'
-import {
-  FILTER_DEBOUNCE_MS,
-  TableFilter,
-  type TableFilterHandle,
-} from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter'
+import { TableFilter } from '@/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter'
 
 const COLUMNS: ColumnDefinition[] = [{ id: 'col-name', name: 'Name', type: 'string' }]
 
@@ -18,7 +14,6 @@ let root: Root
 
 beforeEach(() => {
   globalThis.IS_REACT_ACT_ENVIRONMENT = true
-  vi.useFakeTimers()
   container = document.createElement('div')
   document.body.appendChild(container)
   root = createRoot(container)
@@ -27,41 +22,70 @@ beforeEach(() => {
 afterEach(() => {
   act(() => root.unmount())
   container.remove()
-  vi.useRealTimers()
 })
 
 function renderFilter(
   onChange: (filter: TablePredicate | null) => void,
-  filter: TablePredicate | null = null,
-  ref?: Ref<TableFilterHandle>
+  filter: TablePredicate | null = null
 ) {
   act(() => {
-    root.render(<TableFilter ref={ref} columns={COLUMNS} filter={filter} onChange={onChange} />)
+    root.render(<TableFilter columns={COLUMNS} filter={filter} onChange={onChange} />)
   })
 }
 
+function valueInput(): HTMLInputElement | null {
+  return container.querySelector<HTMLInputElement>('input[placeholder="Enter a value"]')
+}
+
+function typeInto(input: HTMLInputElement | null, value: string) {
+  if (!input) return
+  Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set?.call(input, value)
+  input.dispatchEvent(new Event('input', { bubbles: true }))
+}
+
 describe('TableFilter', () => {
-  it('applies text filters after a short typing delay', () => {
-    const onApply = vi.fn()
-    renderFilter(onApply)
-    const input = container.querySelector<HTMLInputElement>('input[placeholder="Enter a value"]')
+  it('commits a typed value on blur, not per keystroke', () => {
+    const onChange = vi.fn()
+    renderFilter(onChange)
+    const input = valueInput()
     expect(input).not.toBeNull()
 
-    act(() => {
-      if (!input) return
-      Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set?.call(input, 'Ada')
-      input.dispatchEvent(new Event('input', { bubbles: true }))
-    })
+    act(() => typeInto(input, 'Ada'))
+    expect(onChange).not.toHaveBeenCalled()
 
-    expect(onApply).not.toHaveBeenCalled()
-    act(() => vi.advanceTimersByTime(FILTER_DEBOUNCE_MS - 1))
-    expect(onApply).not.toHaveBeenCalled()
-    act(() => vi.advanceTimersByTime(1))
-    expect(onApply).toHaveBeenCalledWith({
+    act(() => input?.dispatchEvent(new FocusEvent('focusout', { bubbles: true })))
+    expect(onChange).toHaveBeenCalledTimes(1)
+    expect(onChange).toHaveBeenCalledWith({
       all: [{ field: 'col-name', op: 'eq', value: 'Ada' }],
     })
   })
 
+  it('commits a typed value on Enter', () => {
+    const onChange = vi.fn()
+    renderFilter(onChange)
+    const input = valueInput()
+
+    act(() => typeInto(input, 'Grace'))
+    act(() => input?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })))
+
+    expect(onChange).toHaveBeenCalledTimes(1)
+    expect(onChange).toHaveBeenCalledWith({
+      all: [{ field: 'col-name', op: 'eq', value: 'Grace' }],
+    })
+  })
+
+  it('does not re-commit an unchanged value on blur after Enter', () => {
+    const onChange = vi.fn()
+    renderFilter(onChange)
+    const input = valueInput()
+
+    act(() => typeInto(input, 'Ada'))
+    act(() => input?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })))
+    act(() => input?.dispatchEvent(new FocusEvent('focusout', { bubbles: true })))
+
+    expect(onChange).toHaveBeenCalledTimes(1)
+  })
+
   it('offers a toggleable conjunction without apply or clear actions', () => {
     renderFilter(vi.fn())
     const addFilter = Array.from(container.querySelectorAll('button')).find((button) =>
@@ -82,51 +106,7 @@ describe('TableFilter', () => {
     expect(container.textContent).not.toContain('Clear filters')
   })
 
-  it('flushes the pending filter when the panel closes before the delay', () => {
-    const onChange = vi.fn()
-    const filterRef = createRef<TableFilterHandle>()
-    renderFilter(onChange, null, filterRef)
-    const input = container.querySelector<HTMLInputElement>('input[placeholder="Enter a value"]')
-
-    act(() => {
-      if (!input) return
-      Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set?.call(input, 'Ada')
-      input.dispatchEvent(new Event('input', { bubbles: true }))
-    })
-    act(() => {
-      filterRef.current?.flush()
-    })
-
-    expect(onChange).toHaveBeenCalledTimes(1)
-    expect(onChange).toHaveBeenCalledWith({
-      all: [{ field: 'col-name', op: 'eq', value: 'Ada' }],
-    })
-    act(() => vi.advanceTimersByTime(FILTER_DEBOUNCE_MS))
-    expect(onChange).toHaveBeenCalledTimes(1)
-  })
-
-  it('cancels the previous debounce when typing continues', () => {
-    const onChange = vi.fn()
-    renderFilter(onChange)
-    const input = container.querySelector<HTMLInputElement>('input[placeholder="Enter a value"]')
-    const setInput = (value: string) => {
-      if (!input) return
-      Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set?.call(input, value)
-      input.dispatchEvent(new Event('input', { bubbles: true }))
-    }
-
-    act(() => setInput('Ada'))
-    act(() => vi.advanceTimersByTime(FILTER_DEBOUNCE_MS - 1))
-    act(() => setInput('Grace'))
-    act(() => vi.advanceTimersByTime(FILTER_DEBOUNCE_MS))
-
-    expect(onChange).toHaveBeenCalledTimes(1)
-    expect(onChange).toHaveBeenCalledWith({
-      all: [{ field: 'col-name', op: 'eq', value: 'Grace' }],
-    })
-  })
-
-  it('clears the active filter when its last rule is removed', () => {
+  it('clears the active filter as soon as its last rule is removed', () => {
     const onChange = vi.fn()
     renderFilter(onChange, {
       all: [{ field: 'col-name', op: 'eq', value: 'Ada' }],
@@ -136,20 +116,15 @@ describe('TableFilter', () => {
       'button[aria-label="Remove filter"]'
     )
     act(() => removeButton?.click())
-    act(() => vi.advanceTimersByTime(FILTER_DEBOUNCE_MS))
 
     expect(onChange).toHaveBeenCalledWith(null)
-    expect(
-      container.querySelector<HTMLInputElement>('input[placeholder="Enter a value"]')?.value
-    ).toBe('')
+    expect(valueInput()?.value).toBe('')
   })
 
   it('preserves saved isNull conditions instead of dropping them', () => {
     const onChange = vi.fn()
     renderFilter(onChange, { all: [{ field: 'col-name', op: 'isNull' }] })
 
-    act(() => vi.advanceTimersByTime(FILTER_DEBOUNCE_MS))
-
     expect(onChange).not.toHaveBeenCalled()
   })
 
@@ -166,12 +141,10 @@ describe('TableFilter', () => {
       (button) => button.textContent?.trim() === 'or'
     )
     expect(orToggle).toBeDefined()
-
-    act(() => vi.advanceTimersByTime(FILTER_DEBOUNCE_MS))
     expect(onChange).not.toHaveBeenCalled()
   })
 
-  it('merges the OR groups when the conjunction is toggled back to and', () => {
+  it('merges the OR groups as soon as the conjunction is toggled back to and', () => {
     const onChange = vi.fn()
     renderFilter(onChange, {
       any: [
@@ -184,7 +157,6 @@ describe('TableFilter', () => {
       (button) => button.textContent?.trim() === 'or'
     )
     act(() => orToggle?.click())
-    act(() => vi.advanceTimersByTime(FILTER_DEBOUNCE_MS))
 
     expect(onChange).toHaveBeenCalledWith({
       all: [

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

@@ -1,15 +1,6 @@
 'use client'
 
-import {
-  forwardRef,
-  memo,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Button, ChipDropdown, ChipInput } from '@sim/emcn'
 import { Plus, X } from '@sim/emcn/icons'
 import { generateShortId } from '@sim/utils/id'
@@ -33,8 +24,6 @@ const MULTI_SELECT_COMPARISON_OPERATORS = COMPARISON_OPERATORS.filter((o) =>
   MULTI_SELECT_FILTER_OPERATORS.has(o.value)
 )
 
-export const FILTER_DEBOUNCE_MS = 250
-
 function selectFilterOperators(column: ColumnDefinition | undefined): Set<string> {
   return column?.multiple ? MULTI_SELECT_FILTER_OPERATORS : SINGLE_SELECT_FILTER_OPERATORS
 }
@@ -56,31 +45,17 @@ interface TableFilterProps {
   onChange: (filter: TablePredicate | null) => void
 }
 
-export interface TableFilterHandle {
-  flush: () => void
-}
-
-interface PendingFilter {
-  filter: TablePredicate | null
-  signature: string
-}
-
-export const TableFilter = forwardRef<TableFilterHandle, TableFilterProps>(function TableFilter(
-  { columns, filter, onChange },
-  ref
-) {
+export function TableFilter({ columns, filter, onChange }: TableFilterProps) {
   const lastAppliedFilterRef = useRef<string | undefined>(undefined)
   const onChangeRef = useRef(onChange)
-  const pendingFilterRef = useRef<PendingFilter | null>(null)
-  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const [rules, setRules] = useState<FilterRule[]>(() => {
     const fromFilter = predicateToFilterRules(filter)
     return fromFilter.length > 0 ? fromFilter : [createRule(columns)]
   })
   // Seed the "already applied" signature from the rules the panel actually
   // renders, not the raw prop: a saved tree the flat builder cannot express
   // (deeply nested groups, wire key order) round-trips differently, and seeding
-  // from the prop would schedule an unedited autosave of that lossy form the
+  // from the prop would fire an unedited autosave of that lossy form the
   // moment the panel opens. The normalized form persists only once the user
   // really edits a rule.
   lastAppliedFilterRef.current ??= JSON.stringify(toAppliedPredicate(rules, columns))
@@ -149,41 +124,19 @@ export const TableFilter = forwardRef<TableFilterHandle, TableFilterProps>(funct
     [columnById]
   )
 
-  const flush = useCallback(() => {
-    const pending = pendingFilterRef.current
-    if (!pending) return
-
-    if (timeoutRef.current) clearTimeout(timeoutRef.current)
-    timeoutRef.current = null
-    pendingFilterRef.current = null
-    lastAppliedFilterRef.current = pending.signature
-    onChangeRef.current(pending.filter)
-  }, [])
-
-  useImperativeHandle(ref, () => ({ flush }), [flush])
-
+  // Applies on every rules change. Rules only change on completed gestures —
+  // dropdown picks, row add/remove, conjunction toggles, and the value field's
+  // Enter/blur commit ({@link FilterValueInput} buffers keystrokes locally) —
+  // so nothing is ever pending and there is nothing to lose on unmount. The
+  // signature guard keeps no-op changes (a blank row added, an untouched
+  // reseed) from writing.
   useEffect(() => {
     const nextFilter = toAppliedPredicate(rules, columns)
     const signature = JSON.stringify(nextFilter)
-    if (signature === lastAppliedFilterRef.current) {
-      pendingFilterRef.current = null
-      return
-    }
-
-    const pending = { filter: nextFilter, signature }
-    pendingFilterRef.current = pending
-    const timeout = setTimeout(() => {
-      if (pendingFilterRef.current !== pending) return
-      timeoutRef.current = null
-      flush()
-    }, FILTER_DEBOUNCE_MS)
-    timeoutRef.current = timeout
-
-    return () => {
-      clearTimeout(timeout)
-      if (timeoutRef.current === timeout) timeoutRef.current = null
-    }
-  }, [rules, columns, flush])
+    if (signature === lastAppliedFilterRef.current) return
+    lastAppliedFilterRef.current = signature
+    onChangeRef.current(nextFilter)
+  }, [rules, columns])
 
   return (
     <div className='border-[var(--border)] border-b bg-[var(--bg)] px-4 py-2'>
@@ -216,7 +169,7 @@ export const TableFilter = forwardRef<TableFilterHandle, TableFilterProps>(funct
       </div>
     </div>
   )
-})
+}
 
 interface FilterRuleRowProps {
   rule: FilterRule
@@ -311,11 +264,9 @@ const FilterRuleRow = memo(function FilterRuleRow({
           className='min-w-[100px] flex-1'
         />
       ) : (
-        <ChipInput
+        <FilterValueInput
           value={rule.value}
-          onChange={(e) => onUpdate(rule.id, 'value', e.target.value)}
-          placeholder='Enter a value'
-          className='flex-1'
+          onCommit={(value) => onUpdate(rule.id, 'value', value)}
         />
       )}
 
@@ -332,6 +283,43 @@ const FilterRuleRow = memo(function FilterRuleRow({
   )
 })
 
+interface FilterValueInputProps {
+  value: string
+  onCommit: (value: string) => void
+}
+
+/**
+ * Locally buffered value field: keystrokes stay in the field until Enter or
+ * blur commits them — the spreadsheet-cell contract. Every click-driven exit
+ * from the panel (closing it, switching views, navigating away) blurs the
+ * field first, so finishing-by-leaving commits without any imperative
+ * coordination. An external reseed (column switch clearing the value, a view
+ * replacement remount) adopts the incoming value over the draft.
+ */
+function FilterValueInput({ value, onCommit }: FilterValueInputProps) {
+  const [draft, setDraft] = useState(value)
+  const [prevValue, setPrevValue] = useState(value)
+  if (prevValue !== value) {
+    setPrevValue(value)
+    setDraft(value)
+  }
+
+  return (
+    <ChipInput
+      value={draft}
+      onChange={(e) => setDraft(e.target.value)}
+      onBlur={() => {
+        if (draft !== value) onCommit(draft)
+      }}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' && draft !== value) onCommit(draft)
+      }}
+      placeholder='Enter a value'
+      className='flex-1'
+    />
+  )
+}
+
 function createRule(columns: ColumnDefinition[]): FilterRule {
   const first = columns[0]
   return {