nextcloud-libraries / nextcloud-libraries/nextcloud-vue

[Feature Request/Reference] New NcCombobox component for real-time free-text input

Open
#8,306 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
Vue
Stars
246
Forks
99
Avg merge
1d 20h
Merged PRs (30d)
103

Description

🛡️ [Feature Reference] New NcCombobox component for real-time free-text input

Is your feature request related to a problem? Please describe.
Currently, NcSelectTags and NcSelect are excellent for selecting defined entities, but they often struggle with true "Combobox" scenarios. In many search-as-you-type or ad-hoc creation workflows, the user's live-typed text is the primary source of truth.

Existing components sometimes:

  1. Clear the input on blur if no existing match is selected.
  2. Delay the v-model synchronization until a final selection is made (Enter/Click).
  3. Require significant boilerplate to behave like a standard text input with suggestions.

Describe the solution you'd like
I have developed a reference implementation for an NcCombobox. It wraps NcSelect (v9+) to provide a seamless "Input + Suggestions" experience that feels native to the Nextcloud Design System (NDS).

Key improvements in this implementation:

  • Instant Sync: Emits update:modelValue on every keystroke using the @search-change event.
  • Persistent Free-text: Configured with taggable and push-tags to ensure user input is never discarded or reset.
  • Native NDS Look: Inherits all CSS variables, focus rings, and z-index behaviors from @nextcloud/vue.
  • Lightweight: Uses the official NcSelect as a parent to stay future-proof.

Reference Implementation
I have set up a standalone repository with documentation, professional structure, and even a Klingon translation (for honor!):

👉 [[https://github.com/tx0h/NcCombobox]]

License
To make integration into the Nextcloud ecosystem as easy as possible, the project is dual-licensed under MIT and Artistic License 2.0.

Additional context
I believe this would be a valuable addition to the @nextcloud/vue library to support more dynamic search and tagging interfaces across the ecosystem. I am happy to discuss merging this logic into the core or maintaining it as a reference for other developers.

Qapla'!

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reviewing the existing NcSelect component in @nextcloud/vue and the linked NcCombobox reference implementation. Compare its @search-change synchronization with the taggable and push-tags behavior, then clarify whether the desired outcome is core integration or a maintained reference component.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.