From 6756a669d78f01f7c3cd1730ca7633809e71384d Mon Sep 17 00:00:00 2001
From: wanger <122891289+10knamesmore@users.noreply.github.com>
Date: Wed, 29 Apr 2026 18:42:52 +0800
Subject: [PATCH] fix(dashboard): use v-autocomplete for list+options config
 field (#7884) (#7885)

* fix(dashboard): use v-autocomplete for list+options config field (#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.

* perf(dashboard): memoize list config select items via computed

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

---------

Co-authored-by: wanger <wanger@example.com>
---
 .../components/shared/ConfigItemRenderer.vue   | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/dashboard/src/components/shared/ConfigItemRenderer.vue b/dashboard/src/components/shared/ConfigItemRenderer.vue
index 58e41f3ab7..35a9dfc657 100644
--- a/dashboard/src/components/shared/ConfigItemRenderer.vue
+++ b/dashboard/src/components/shared/ConfigItemRenderer.vue
@@ -87,11 +87,12 @@
       ></v-checkbox>
     </div>
 
-    <v-select
+    <v-autocomplete
       v-else-if="itemMeta?.type === 'list' && itemMeta?.options"
       :model-value="modelValue"
-      @update:model-value="emitUpdate"
-      :items="getSelectItems(itemMeta)"
+      @update:model-value="val => { emitUpdate(val); listSearchText = '' }"
+      v-model:search="listSearchText"
+      :items="listSelectItems"
       item-title="title"
       item-value="value"
       :disabled="itemMeta?.readonly"
@@ -101,7 +102,7 @@
       hide-details
       chips
       multiple
-    ></v-select>
+    ></v-autocomplete>
 
     <v-select
       v-else-if="itemMeta?.options"
@@ -238,10 +239,11 @@ import PersonaSelector from './PersonaSelector.vue'
 import KnowledgeBaseSelector from './KnowledgeBaseSelector.vue'
 import PluginSetSelector from './PluginSetSelector.vue'
 import T2ITemplateEditor from './T2ITemplateEditor.vue'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useI18n, useModuleI18n } from '@/i18n/composables'
 
 const numericTemp = ref(null)
+const listSearchText = ref('')
 
 const props = defineProps({
   modelValue: {
@@ -278,6 +280,12 @@ function emitUpdate(val) {
   emit('update:modelValue', val)
 }
 
+const listSelectItems = computed(() =>
+  props.itemMeta?.type === 'list' && props.itemMeta?.options
+    ? getSelectItems(props.itemMeta)
+    : []
+)
+
 function toNumber(val) {
   const n = parseFloat(val)
   return isNaN(n) ? 0 : n