Summary
For lists with many items, typing characters to filter them inline is a major usability improvement. Similar to react-select's search behavior, but adapted for terminal rendering.
Proposed API
<EnhancedSelectInput
items={items}
searchable
searchPlaceholder="Type to filter..."
/>
Behavior
- When
searchable is true, printable characters are captured as a search query
- The items list is filtered to entries whose
label matches the query (fuzzy or prefix)
- A search input line is rendered above the item list
Backspace removes the last search character
Escape clears the search
- Navigation (arrows/vim) works on the filtered subset
Challenges
- Conflict with existing hotkey system (needs careful key routing)
- Conflict with vim navigation keys (
h, j, k, l)
- Filtering changes item indices, which affects
selectedIndex state
Scope
- Add
searchable?: boolean and searchPlaceholder?: string props
- Add
query state and filter logic
- Add search input rendering
- Add tests for filtering, navigation within filtered results, and clearing
- Document in README
Summary
For lists with many items, typing characters to filter them inline is a major usability improvement. Similar to
react-select's search behavior, but adapted for terminal rendering.Proposed API
Behavior
searchableis true, printable characters are captured as a search querylabelmatches the query (fuzzy or prefix)Backspaceremoves the last search characterEscapeclears the searchChallenges
h,j,k,l)selectedIndexstateScope
searchable?: booleanandsearchPlaceholder?: stringpropsquerystate and filter logic