Skip to content

fix(app): model selector keyboard navigation does not follow visual group order #39341

Description

@DevDengChao

Description

When filtering models in the V2 model selector (e.g., typing "deep" to find DeepSeek models), pressing up/down arrow keys navigates in alphabetical model-name order instead of following the visual provider-grouped order.

For example, if "DeepSeek V4 Flash" exists under both Anthropic and OpenRouter:

  • Visual order: Anthropic group (top) → OpenRouter group (bottom)
  • Keyboard navigation order: follows flat alphabetical sort, jumping between groups non-linearly

Steps to reproduce

  1. Add multiple providers that have models with the same or similar names (e.g., two providers both offering "DeepSeek V4 Flash")
  2. Open the model selector in the Desktop App or Web UI
  3. Type "deep" in the search box to filter
  4. Press Down arrow to navigate through the filtered results
  5. Observe that the highlight skips around between provider groups instead of moving sequentially through the visual list

Root cause

In packages/app/src/components/dialog-select-model.tsx, the keys() function (used for keyboard navigation) builds a flat array from models() sorted alphabetically by model name, while the UI renders groups() which re-groups by provider and sorts groups by provider popularity. These two orderings are fundamentally different.

OpenCode version

Latest (dev branch)

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions