fix(dashboard): use v-autocomplete for list+options config field (#7884)#7885
Merged
Soulter merged 2 commits intoAstrBotDevs:masterfrom Apr 29, 2026
Merged
Conversation
…rBotDevs#7884) Replace v-select with v-autocomplete in the list+options branch of ConfigItemRenderer. v-select's keyboard typeahead auto-toggles the first prefix-matching item in multiple mode, which is unusable for long option lists (e.g. plugin language pickers). v-autocomplete filters the dropdown by typed text instead. Bind v-model:search and clear it in @update:model-value so the search box resets after each selection, allowing consecutive keyword search.
Contributor
There was a problem hiding this comment.
Hey - I've left some high level feedback:
- Consider extracting the inline
@update:model-value="val => { emitUpdate(val); listSearchText = '' }"into a named handler in the script block so the template stays simpler and you avoid recreating the function on each render.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- Consider extracting the inline `@update:model-value="val => { emitUpdate(val); listSearchText = '' }"` into a named handler in the script block so the template stays simpler and you avoid recreating the function on each render.Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
Contributor
There was a problem hiding this comment.
Code Review
This pull request updates ConfigItemRenderer.vue by replacing v-select with v-autocomplete to support searching within list-type configuration items. The review identifies a performance concern where the items list is re-processed on every keystroke and suggests using a computed property to optimize rendering. A UX improvement was also proposed to include closable-chips for easier removal of selected items in multi-select mode.
Wrap getSelectItems(itemMeta) in a computed so the options array is only re-mapped when itemMeta changes, not on every keystroke in the v-autocomplete search input. Avoids quadratic-ish work for long option lists
Soulter
approved these changes
Apr 29, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
close #7884
Modifications / 改动点
将插件配置中
list + options字段的渲染组件从 Vuetifyv-select替换为v-autocomplete:在多选场景下,键入字符不再触发v-select内置的"键盘 typeahead 自动 toggle 首个前缀匹配项"行为(该行为对长 options 列表完全不可用,例如astrbot_plugin_repo_of_today中含上千项的语言选择字段),改为按输入文本过滤下拉候选。同时新增本地
listSearchTextref,通过v-model:search绑定,并在@update:model-value中清空,使每次选中后搜索框自动重置,可连续键入下一个关键词搜索而无需手动退格。修改文件
dashboard/src/components/shared/ConfigItemRenderer.vue— 将type === 'list' && options分支由v-select改为v-autocomplete,新增listSearchTextref 与选中清空逻辑。未改动:单选
v-select分支、render_type: 'checkbox'渲染变体、checkbox与其他 schema 类型分支。Screenshots or Test Results / 运行截图或测试结果
修改前, 选中


python后输入ty, python chip被覆盖, 并且自动选中typesciprt, 忽略后面的typst等等修改后,


会只进行字符串匹配, 并且不自动选中
Checklist / 检查清单
😊 If there are new features added in the PR, I have discussed it with the authors through issues/emails, etc.
/ 如果 PR 中有新加入的功能,已经通过 Issue / 邮件等方式和作者讨论过。
👀 My changes have been well-tested, and "Verification Steps" and "Screenshots" have been provided above.
/ 我的更改经过了良好的测试,并已在上方提供了“验证步骤”和“运行截图”。
🤓 I have ensured that no new dependencies are introduced, OR if new dependencies are introduced, they have been added to the appropriate locations in
requirements.txtandpyproject.toml./ 我确保没有引入新依赖库,或者引入了新依赖库的同时将其添加到
requirements.txt和pyproject.toml文件相应位置。😮 My changes do not introduce malicious code.
/ 我的更改没有引入恶意代码。
Summary by Sourcery
Improve dashboard plugin list option selection by switching to an autocomplete-based multi-select with better search behavior.
Bug Fixes:
Enhancements: