Skip to content

fix(dashboard): use v-autocomplete for list+options config field (#7884)#7885

Merged
Soulter merged 2 commits intoAstrBotDevs:masterfrom
10knamesmore:fix/7884-list-options-autocomplete
Apr 29, 2026
Merged

fix(dashboard): use v-autocomplete for list+options config field (#7884)#7885
Soulter merged 2 commits intoAstrBotDevs:masterfrom
10knamesmore:fix/7884-list-options-autocomplete

Conversation

@10knamesmore
Copy link
Copy Markdown
Contributor

@10knamesmore 10knamesmore commented Apr 29, 2026

close #7884

Modifications / 改动点

将插件配置中 list + options 字段的渲染组件从 Vuetify v-select 替换为 v-autocomplete:在多选场景下,键入字符不再触发 v-select 内置的"键盘 typeahead 自动 toggle 首个前缀匹配项"行为(该行为对长 options 列表完全不可用,例如 astrbot_plugin_repo_of_today 中含上千项的语言选择字段),改为按输入文本过滤下拉候选。

同时新增本地 listSearchText ref,通过 v-model:search 绑定,并在 @update:model-value 中清空,使每次选中后搜索框自动重置,可连续键入下一个关键词搜索而无需手动退格。

修改文件

  • dashboard/src/components/shared/ConfigItemRenderer.vue — 将 type === 'list' && options 分支由 v-select 改为 v-autocomplete,新增 listSearchText ref 与选中清空逻辑。

未改动:单选 v-select 分支、render_type: 'checkbox' 渲染变体、checkbox 与其他 schema 类型分支。

  • This is NOT a breaking change. / 这不是一个破坏性变更。

Screenshots or Test Results / 运行截图或测试结果

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

修改后,
image
image

会只进行字符串匹配, 并且不自动选中

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.txt and pyproject.toml.
    / 我确保没有引入新依赖库,或者引入了新依赖库的同时将其添加到 requirements.txtpyproject.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:

  • Prevent multi-select list option fields from unintentionally toggling and overwriting selections when typing in large option sets.

Enhancements:

  • Use an autocomplete input for list+options configuration fields to support inline text filtering and automatic clearing of the search term after each selection.

…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.
@auto-assign auto-assign Bot requested review from LIghtJUNction and anka-afk April 29, 2026 04:05
@dosubot dosubot Bot added size:XS This PR changes 0-9 lines, ignoring generated files. area:webui The bug / feature is about webui(dashboard) of astrbot. labels Apr 29, 2026
Copy link
Copy Markdown
Contributor

@sourcery-ai sourcery-ai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Comment thread dashboard/src/components/shared/ConfigItemRenderer.vue
Comment thread dashboard/src/components/shared/ConfigItemRenderer.vue
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
@dosubot dosubot Bot added size:S This PR changes 10-29 lines, ignoring generated files. and removed size:XS This PR changes 0-9 lines, ignoring generated files. labels Apr 29, 2026
@dosubot dosubot Bot added the lgtm This PR has been approved by a maintainer label Apr 29, 2026
@Soulter Soulter merged commit 6756a66 into AstrBotDevs:master Apr 29, 2026
21 checks passed
@10knamesmore 10knamesmore deleted the fix/7884-list-options-autocomplete branch April 29, 2026 10:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:webui The bug / feature is about webui(dashboard) of astrbot. lgtm This PR has been approved by a maintainer size:S This PR changes 10-29 lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug] 插件配置中 list+options 多选字段输入字符会清空已选 chips

2 participants