nextcloud-libraries / nextcloud-libraries/nextcloud-vue
[Feature Request/Reference] New NcCombobox component for real-time free-text input
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:
- Clear the input on blur if no existing match is selected.
- Delay the
v-modelsynchronization until a final selection is made (Enter/Click). - 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:modelValueon every keystroke using the@search-changeevent. - Persistent Free-text: Configured with
taggableandpush-tagsto 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
NcSelectas 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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