nextcloud-libraries / nextcloud-libraries/nextcloud-vue
[Bug] - `NcSelect` crashes on rendering a large amount of chips
Open
Nobody has claimed this yet.
0. to triage
bug
dependencies
- Dominant language
- Vue
- Stars
- 246
- Forks
- 99
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 103
Description
Current state
Was tested with system_tags.
- All applied system tags come together in one XML line (around 3 kB of data transferred for 30 tags => 200 kB for 2k tags - not a big deal, I'd say)
- NcSelect doesn't have a height and content limit, so it's possible to spam it with multiple labels, until it becomes large enough to fill the whole sidebar space, not allowing to see underlying tabs.
- The dropdown with autocomplete and search through the list works fine on 200 tags, so I see nothing wrong with 2000
- But 2000 tags which are picked are probably too much for the component, and NcSelect crashes on render them in
visiblearea.
| overflow of the page | opened dropdown with 200 options |
|---|---|
Possible solution
- Limit the number of visible 'selected' chips
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 locating the NcSelect component and reproduce the crash with about 2,000 selected system tags; compare it with the working autocomplete dropdown at around 200 tags. Done means rendering a bounded number of selected chips without crashing or taking over the sidebar, while selection and search remain usable.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100