Skip to content

[BUG]: LLM Settings: model ID combobox interaction #3800

@a-effort

Description

@a-effort

🐞 Bug Summary

In the Add/Edit LLM Model modal (LLM Settings tab), the Model ID field uses a native HTML for suggestions. After selecting a model, the browser filters the suggestion list to only entries matching the current input value. This shows a single option that appears visually like a tooltip instead of the full model list. This makes it impossible to switch to a different model without manually clearing the field first. The native datalist also renders inconsistently across browsers, appearing as a floating tooltip rather than a styled dropdown consistent with the rest of the admin UI.

🧩 Affected Component

Select the area of the project impacted:

  • mcpgateway - API
  • mcpgateway - UI (admin panel)
  • mcpgateway.wrapper - stdio wrapper
  • Federation or Transports
  • CLI, Makefiles, or shell scripts
  • Container setup (Docker/Podman/Compose)
  • Other (explain below)

🔁 Steps to Reproduce

  1. Navigate to the admin panel → LLM Settings tab → Models sub-tab
  2. Click Add Model
  3. Select a provider that has models available (e.g. Ollama)
  4. Click the refresh (↺) button to fetch available models
  5. Select any model from the suggestion list (e.g. granite4:tiny-h)
  6. Click back into the Model ID field and attempt to view or switch to a different model

🤔 Expected Behavior

Clicking or focusing the Model ID field should display the full list of available models regardless of the currently selected value, allowing the user to browse and switch selections freely. The suggestions list should be styled consistently with the rest of the admin UI (matching the Provider select dropdown above it).

📓 Logs / Error Output

No console errors. Visual-only regression — the native datalist popup filters to a single matching entry and renders as a browser-native tooltip bubble.

🧠 Environment Info

You can retrieve most of this from the /version endpoint.

Key Value
Version or commit main
Runtime Python 3.11

🧩 Additional Context (optional)

The field is implemented as <input type="text" list="llm-model-suggestions"> + <datalist> populated via fetchModelsForModelModal(). The fix is to replace it with a custom Alpine.js combobox (consistent with the existing team-selector pattern in the codebase) that: stores the full model list independently of the filter text, resets the filter on open to always show all options, and falls back to free-text entry for model IDs not returned by the provider API.

Metadata

Metadata

Assignees

Labels

bugSomething isn't workingfrontendFrontend development (HTML, CSS, JavaScript)triageIssues / Features awaiting triage

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions