kobotoolbox / kpi / 27608641316

82%

master: 76%

push

github

fix(dataTable): filter input losing focus DEV-2245 (#7148)

### 📣 Summary

Fixed filter inputs in the Data Table losing focus while typing, which
caused keystrokes to be lost after query completion.

### 💭 Notes

Changes here:
- **New files** (pulled stable components out to fix React remounting):
  - `TableDropdownFilter.tsx` — Dropdown filter for select questions
    - Migrated the raw `<select>` to Mantine Select
  - `TableTextFilter.tsx` — Text input filter with debouncing
- **table.tsx**:
- Replaced inline filter component definitions in `_prepColumns` with
wrapper functions that use the stable imported components

The bug: filter components were getting redefined inside `_prepColumns`
every time it ran. When queries came back, React saw brand new component
references and unmounted/remounted them—bye bye focus, bye bye anything
you were typing.

Now the filter components live in their own files. React sees the same
reference each time and keeps focus, debounce timers, and cursor
position intact.

### 👀 Preview steps

1. ℹ️ Have an account with a project that has submissions
2. Go to Project → Data → Table
3. Click on any column filter input (search box or dropdown at the top
of a column)
4. Start typing quickly in the filter
5. 🔴 [on main] The input loses focus mid-typing and your keystrokes
vanish
6. 🟢 [on PR] The input keeps focus while you type and captures
everything
7. Keep typing to check that the debounced query fires after 300ms
8. 🟢 Filter results update without stealing focus

---------

Co-authored-by: James Kiger <68701146+jamesrkiger@users.noreply.github.com>

9034 of 12268 branches covered (73.64%)

29662 of 36357 relevant lines covered (81.59%)

5.56 hits per line