Skip to content

feat: searchable mode — type to filter items inline #14

@gfargo

Description

@gfargo

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions