Virtualized searchable Combobox component + keyword-search node-type picker
- Dominant language
- TypeScript
- Stars
- 481
- Forks
- 108
- Avg merge
- 6d 8h
- Merged PRs (30d)
- 5
Description
## Parent
- Part of #2086
## What to build
A reusable, virtualized, searchable **Combobox** component, wired into the keyword-search node-type picker so it works end-to-end on a large schema. Adds `@base-ui/react` and `@tanstack/react-virtual` (imported via subpath exports to preserve tree-shaking). The Combobox is single-select, controlled (`value`/`onValueChange`), takes `{label, value}` items, and supports placeholder, disabled, and a "no results" empty state. Accessibility comes from Base UI (W3C APG combobox pattern); windowing from TanStack Virtual using Base UI's virtualized pattern (`virtualized` prop + `useFilteredItems()` + `onItemHighlighted` → `scrollToIndex`). Filtering starts with the default path plus `useDeferredValue()` on the query.
On a graph with 10,000+ vertex labels, opening the keyword-search node-type picker is instant, filters as the user types, and selects with mouse or keyboard.
## Acceptance criteria
- [ ] Combobox component exists, styled to the design system, single-select and controlled
- [ ] Base UI + TanStack Virtual added via subpath imports; new deps confined behind the component
- [ ] Type-to-filter narrows the list; selection calls `onValueChange` with the correct value; placeholder, disabled, and empty state work; arrow+Enter keyboard selection works
- [ ] Component unit tests cover filter/select/keyboard and a 10,000-item interactivity guardrail (filter to a late item and select it) without asserting DOM node counts
- [ ] Keyword-search node-type select uses the Combobox, preserving its existing Jotai-atom-controlled wiring
- [ ] `pnpm checks` and `pnpm test` pass
## Blocked by
- None — can start immediately.
Contributor guide
Research direction
Start at the keyword-search node-type picker and trace its existing Jotai-atom-controlled wiring before designing the reusable Combobox. Review the design-system patterns and run the relevant component tests first; add coverage for filtering, selection, keyboard use, empty and disabled states, and the 10,000-item guardrail. Done means the picker remains wired end-to-end, the acceptance criteria pass, and pnpm checks plus pnpm test succeed.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 68/100