From a7868250934f453856910c59098ecf63efc5d8ad Mon Sep 17 00:00:00 2001
From: Jin Yi <jin12cc@gmail.com>
Date: Wed, 11 Mar 2026 08:14:06 +0900
Subject: [PATCH] feat: replace PrimeVue AutoComplete with SearchAutocomplete
 in ManagerDialog (#9645)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Replace legacy PrimeVue `AutoCompletePlus` with a new
`SearchAutocomplete` component built on Reka UI, matching the
`SearchInput` design system.

## Changes

- **What**: Add `SearchAutocomplete` component extending `SearchInput`
with dropdown suggestions, IME composition handling, and generic typed
`optionLabel` support. Replace `AutoCompletePlus` usage in
`ManagerDialog`.
- **Dependencies**: None (uses existing Reka UI Combobox primitives)

## Review Focus

- `SearchAutocomplete` feature parity with the replaced
`AutoCompletePlus` (suggestions, option selection, IME handling)
- Dropdown styling and positioning via Reka UI `ComboboxContent`

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9645-feat-replace-PrimeVue-AutoComplete-with-SearchAutocomplete-in-ManagerDialog-31e6d73d36508117ba0bef3d30dd0863)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Amp <amp@ampcode.com>
---
 .../ui/search-input/SearchAutocomplete.vue    | 213 ++++++++++++++++++
 .../ui/search-input/SearchInput.vue           |   7 +-
 .../components/manager/ManagerDialog.vue      |  54 ++---
 3 files changed, 227 insertions(+), 47 deletions(-)
 create mode 100644 src/components/ui/search-input/SearchAutocomplete.vue

diff --git a/src/components/ui/search-input/SearchAutocomplete.vue b/src/components/ui/search-input/SearchAutocomplete.vue
new file mode 100644
index 0000000000..95523ae806
--- /dev/null
+++ b/src/components/ui/search-input/SearchAutocomplete.vue
@@ -0,0 +1,213 @@
+<template>
+  <ComboboxRoot
+    v-model="modelValue"
+    v-model:open="isOpen"
+    ignore-filter
+    :disabled
+    :class="className"
+  >
+    <ComboboxAnchor
+      :class="
+        cn(
+          searchInputVariants({ size }),
+          disabled && 'pointer-events-none opacity-50'
+        )
+      "
+      @click="focus"
+    >
+      <Button
+        v-if="modelValue"
+        :class="cn('absolute', sizeConfig.clearPos)"
+        variant="textonly"
+        size="icon-sm"
+        :aria-label="$t('g.clear')"
+        @click.stop="clearSearch"
+      >
+        <i :class="cn('icon-[lucide--x]', sizeConfig.icon)" />
+      </Button>
+      <i
+        v-else-if="loading"
+        :class="
+          cn(
+            'pointer-events-none absolute icon-[lucide--loader-circle] animate-spin',
+            sizeConfig.iconPos,
+            sizeConfig.icon
+          )
+        "
+      />
+      <i
+        v-else
+        :class="
+          cn(
+            'pointer-events-none absolute',
+            sizeConfig.iconPos,
+            sizeConfig.icon,
+            icon
+          )
+        "
+      />
+
+      <ComboboxInput
+        ref="inputRef"
+        v-model="modelValue"
+        :class="
+          cn(
+            'size-full border-none bg-transparent outline-none',
+            sizeConfig.inputPl,
+            sizeConfig.inputText
+          )
+        "
+        :placeholder="placeholderText"
+        :auto-focus="autofocus"
+        @compositionstart="isComposing = true"
+        @compositionend="isComposing = false"
+        @keydown.enter="onEnterKey"
+      />
+    </ComboboxAnchor>
+
+    <ComboboxContent
+      v-if="suggestions.length > 0"
+      position="popper"
+      :side-offset="4"
+      :class="
+        cn(
+          'z-50 max-h-60 w-(--reka-combobox-trigger-width) overflow-y-auto',
+          'rounded-lg border border-border-default bg-base-background p-1 shadow-lg'
+        )
+      "
+    >
+      <ComboboxItem
+        v-for="(suggestion, index) in suggestions"
+        :key="suggestionKey(suggestion, index)"
+        :value="suggestionValue(suggestion)"
+        :class="
+          cn(
+            'cursor-pointer rounded-sm px-3 py-2 text-sm outline-none',
+            'data-highlighted:bg-secondary-background-hover'
+          )
+        "
+        @select.prevent="onSelectSuggestion(suggestion)"
+      >
+        <slot name="suggestion" :suggestion>
+          {{ suggestionLabel(suggestion) }}
+        </slot>
+      </ComboboxItem>
+    </ComboboxContent>
+  </ComboboxRoot>
+</template>
+
+<script setup lang="ts" generic="T">
+import type { HTMLAttributes } from 'vue'
+
+import { cn } from '@/utils/tailwindUtil'
+import {
+  ComboboxAnchor,
+  ComboboxContent,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxRoot
+} from 'reka-ui'
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import Button from '@/components/ui/button/Button.vue'
+import type { SearchInputVariants } from './searchInput.variants'
+import {
+  searchInputSizeConfig,
+  searchInputVariants
+} from './searchInput.variants'
+
+const { t } = useI18n()
+
+const {
+  placeholder,
+  icon = 'icon-[lucide--search]',
+  autofocus = false,
+  loading = false,
+  disabled = false,
+  size = 'md',
+  suggestions = [],
+  optionLabel,
+  optionKey,
+  class: className
+} = defineProps<{
+  placeholder?: string
+  icon?: string
+  autofocus?: boolean
+  loading?: boolean
+  disabled?: boolean
+  size?: SearchInputVariants['size']
+  suggestions?: T[]
+  optionLabel?: keyof T & string
+  optionKey?: keyof T & string
+  class?: HTMLAttributes['class']
+}>()
+
+const emit = defineEmits<{
+  select: [item: T]
+}>()
+
+const sizeConfig = computed(() => searchInputSizeConfig[size])
+
+const modelValue = defineModel<string>({ required: true })
+
+const inputRef = ref<InstanceType<typeof ComboboxInput> | null>(null)
+const isOpen = ref(false)
+const isComposing = ref(false)
+
+function focus() {
+  inputRef.value?.$el?.focus()
+}
+
+defineExpose({ focus })
+
+const placeholderText = computed(
+  () => placeholder ?? t('g.searchPlaceholder', { subject: '' })
+)
+
+function clearSearch() {
+  modelValue.value = ''
+  focus()
+}
+
+function getItemProperty(item: T, key: keyof T & string): string {
+  if (typeof item === 'object' && item !== null) {
+    return String(item[key])
+  }
+  return String(item)
+}
+
+function suggestionLabel(item: T): string {
+  if (optionLabel) return getItemProperty(item, optionLabel)
+  return String(item)
+}
+
+function suggestionKey(item: T, index: number): string {
+  if (optionKey) return getItemProperty(item, optionKey)
+  return `${suggestionLabel(item)}-${index}`
+}
+
+function suggestionValue(item: T): string {
+  return suggestionLabel(item)
+}
+
+function onSelectSuggestion(item: T) {
+  modelValue.value = suggestionLabel(item)
+  isOpen.value = false
+  emit('select', item)
+}
+
+function onEnterKey(e: KeyboardEvent) {
+  if (isComposing.value) {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+}
+
+watch(
+  () => suggestions,
+  (items) => {
+    isOpen.value = items.length > 0 && !!modelValue.value
+  }
+)
+</script>
diff --git a/src/components/ui/search-input/SearchInput.vue b/src/components/ui/search-input/SearchInput.vue
index c67af8dd50..89a7df4252 100644
--- a/src/components/ui/search-input/SearchInput.vue
+++ b/src/components/ui/search-input/SearchInput.vue
@@ -1,10 +1,5 @@
 <template>
-  <ComboboxRoot
-    :ignore-filter="true"
-    :open="false"
-    :disabled="disabled"
-    :class="className"
-  >
+  <ComboboxRoot :open="false" ignore-filter :disabled :class="className">
     <ComboboxAnchor
       :class="
         cn(
diff --git a/src/workbench/extensions/manager/components/manager/ManagerDialog.vue b/src/workbench/extensions/manager/components/manager/ManagerDialog.vue
index f676818aab..1dbc604509 100644
--- a/src/workbench/extensions/manager/components/manager/ManagerDialog.vue
+++ b/src/workbench/extensions/manager/components/manager/ManagerDialog.vue
@@ -15,50 +15,22 @@
 
     <template #header>
       <div class="flex w-full items-center justify-between gap-2">
-        <div class="flex items-center gap-2">
+        <div class="flex w-full items-center gap-2">
           <SingleSelect
             v-model="searchMode"
             class="min-w-34"
             :options="filterOptions"
           />
-          <AutoCompletePlus
-            v-model.lazy="searchQuery"
+          <SearchAutocomplete
+            v-model="searchQuery"
             :suggestions="suggestions"
             :placeholder="$t('manager.searchPlaceholder')"
-            :complete-on-focus="false"
-            :delay="8"
             option-label="query"
-            class="w-full max-w-lg min-w-md"
-            :pt="{
-              root: { class: 'relative' },
-              pcInputText: {
-                root: {
-                  autofocus: true,
-                  class:
-                    'w-full h-10 rounded-lg bg-comfy-input text-comfy-input-foreground border-none outline-none text-sm'
-                }
-              },
-              overlay: {
-                class:
-                  'bg-comfy-input rounded-lg mt-1 shadow-lg border border-border-default'
-              },
-              list: { class: 'p-1' },
-              option: {
-                class:
-                  'px-3 py-2 rounded hover:bg-button-hover-surface cursor-pointer text-sm'
-              },
-              loader: { style: 'display: none' }
-            }"
-            :show-empty-message="false"
-            @complete="stubTrue"
-            @option-select="onOptionSelect"
-          >
-            <template #dropdownicon>
-              <i
-                class="pi pi-search absolute top-1/2 left-3 -translate-y-1/2 text-muted-foreground"
-              />
-            </template>
-          </AutoCompletePlus>
+            autofocus
+            size="lg"
+            class="max-w-96 flex-1"
+            @select="onOptionSelect"
+          />
         </div>
         <PackInstallButton
           v-if="isMissingTab && missingNodePacks.length > 0"
@@ -170,8 +142,7 @@
 
 <script setup lang="ts">
 import { until, whenever } from '@vueuse/core'
-import { merge, stubTrue } from 'es-toolkit/compat'
-import type { AutoCompleteOptionSelectEvent } from 'primevue/autocomplete'
+import { merge } from 'es-toolkit/compat'
 import {
   computed,
   onBeforeUnmount,
@@ -187,7 +158,7 @@ import { useI18n } from 'vue-i18n'
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import VirtualGrid from '@/components/common/VirtualGrid.vue'
 import SingleSelect from '@/components/input/SingleSelect.vue'
-import AutoCompletePlus from '@/components/primevueOverride/AutoCompletePlus.vue'
+import SearchAutocomplete from '@/components/ui/search-input/SearchAutocomplete.vue'
 import Button from '@/components/ui/button/Button.vue'
 import BaseModalLayout from '@/components/widget/layout/BaseModalLayout.vue'
 import LeftSidePanel from '@/components/widget/panel/LeftSidePanel.vue'
@@ -196,6 +167,7 @@ import { useWorkflowStore } from '@/platform/workflow/management/stores/workflow
 import { useComfyRegistryStore } from '@/stores/comfyRegistryStore'
 import type { components } from '@/types/comfyRegistryTypes'
 import type { NavGroupData, NavItemData } from '@/types/navTypes'
+import type { QuerySuggestion } from '@/types/searchServiceTypes'
 import { OnCloseKey } from '@/types/widgetTypes'
 import PackInstallButton from '@/workbench/extensions/manager/components/manager/button/PackInstallButton.vue'
 import PackUpdateButton from '@/workbench/extensions/manager/components/manager/button/PackUpdateButton.vue'
@@ -399,8 +371,8 @@ const availableSortOptions = computed(() => {
   }))
 })
 
-const onOptionSelect = (event: AutoCompleteOptionSelectEvent) => {
-  searchQuery.value = event.value.query
+const onOptionSelect = (suggestion: QuerySuggestion) => {
+  searchQuery.value = suggestion.query
 }
 
 const onApproachEnd = () => {