From eb1153d83657b1bbaa0c41b23972d170fc142185 Mon Sep 17 00:00:00 2001
From: bymyself <cbyrne@comfy.org>
Date: Sat, 7 Mar 2026 16:21:38 -0800
Subject: [PATCH 1/5] fix: update FormDropdown filteredItems when items prop
 changes

Replace computed itemsKey with a Symbol ref and add a watcher that
re-runs the searcher whenever the items prop changes. This fixes
the Load Video node not showing videos in the Media Assets panel
dropdown when switching between asset types with identical or empty
item sets.
---
 .../form/dropdown/FormDropdown.test.ts        | 124 ++++++++++++++++++
 .../components/form/dropdown/FormDropdown.vue |  18 ++-
 2 files changed, 140 insertions(+), 2 deletions(-)
 create mode 100644 src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.test.ts

diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.test.ts b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.test.ts
new file mode 100644
index 00000000000..77c1e689941
--- /dev/null
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.test.ts
@@ -0,0 +1,124 @@
+import { mount } from '@vue/test-utils'
+import PrimeVue from 'primevue/config'
+import { createI18n } from 'vue-i18n'
+import { describe, expect, it, vi } from 'vitest'
+import { defineComponent, h, nextTick } from 'vue'
+
+import FormDropdown from './FormDropdown.vue'
+import type { FormDropdownItem } from './types'
+
+function createItem(id: string, name: string): FormDropdownItem {
+  return { id, preview_url: '', name, label: name }
+}
+
+const i18n = createI18n({ legacy: false, locale: 'en', messages: { en: {} } })
+
+vi.mock('@/platform/updates/common/toastStore', () => ({
+  useToastStore: () => ({
+    addAlert: vi.fn()
+  })
+}))
+
+const MockFormDropdownMenu = defineComponent({
+  name: 'FormDropdownMenu',
+  props: {
+    items: { type: Array as () => FormDropdownItem[], default: () => [] },
+    updateKey: { type: null, default: undefined },
+    searcher: { type: Function, default: undefined },
+    isSelected: { type: Function, default: undefined },
+    filterOptions: { type: Array, default: () => [] },
+    sortOptions: { type: Array, default: () => [] },
+    maxSelectable: { type: Number, default: 1 },
+    disabled: { type: Boolean, default: false },
+    showOwnershipFilter: { type: Boolean, default: false },
+    ownershipOptions: { type: Array, default: () => [] },
+    showBaseModelFilter: { type: Boolean, default: false },
+    baseModelOptions: { type: Array, default: () => [] }
+  },
+  setup() {
+    return () => h('div', { class: 'mock-menu' })
+  }
+})
+
+function mountDropdown(items: FormDropdownItem[]) {
+  return mount(FormDropdown, {
+    props: { items },
+    global: {
+      plugins: [PrimeVue, i18n],
+      stubs: {
+        FormDropdownInput: true,
+        Popover: { template: '<div><slot /></div>' },
+        FormDropdownMenu: MockFormDropdownMenu
+      }
+    }
+  })
+}
+
+function getMenuItems(
+  wrapper: ReturnType<typeof mountDropdown>
+): FormDropdownItem[] {
+  return wrapper
+    .findComponent(MockFormDropdownMenu)
+    .props('items') as FormDropdownItem[]
+}
+
+describe('FormDropdown', () => {
+  describe('filteredItems updates when items prop changes', () => {
+    it('updates displayed items when items prop changes', async () => {
+      const wrapper = mountDropdown([
+        createItem('input-0', 'video1.mp4'),
+        createItem('input-1', 'video2.mp4')
+      ])
+      await nextTick()
+      await nextTick()
+
+      expect(getMenuItems(wrapper)).toHaveLength(2)
+
+      await wrapper.setProps({
+        items: [
+          createItem('output-0', 'rendered1.mp4'),
+          createItem('output-1', 'rendered2.mp4')
+        ]
+      })
+      await nextTick()
+      await nextTick()
+
+      const menuItems = getMenuItems(wrapper)
+      expect(menuItems).toHaveLength(2)
+      expect(menuItems[0].name).toBe('rendered1.mp4')
+    })
+
+    it('updates when items change but IDs stay the same', async () => {
+      const wrapper = mountDropdown([createItem('1', 'alpha')])
+      await nextTick()
+      await nextTick()
+
+      await wrapper.setProps({ items: [createItem('1', 'beta')] })
+      await nextTick()
+      await nextTick()
+
+      expect(getMenuItems(wrapper)[0].name).toBe('beta')
+    })
+
+    it('updates when switching between empty and non-empty items', async () => {
+      const wrapper = mountDropdown([])
+      await nextTick()
+      await nextTick()
+
+      expect(getMenuItems(wrapper)).toHaveLength(0)
+
+      await wrapper.setProps({ items: [createItem('1', 'video.mp4')] })
+      await nextTick()
+      await nextTick()
+
+      expect(getMenuItems(wrapper)).toHaveLength(1)
+      expect(getMenuItems(wrapper)[0].name).toBe('video.mp4')
+
+      await wrapper.setProps({ items: [] })
+      await nextTick()
+      await nextTick()
+
+      expect(getMenuItems(wrapper)).toHaveLength(0)
+    })
+  })
+})
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.vue b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.vue
index 12c30a1ab8c..5715f1211e8 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Popover from 'primevue/popover'
-import { computed, ref, useTemplateRef } from 'vue'
+import { computed, ref, useTemplateRef, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { useToastStore } from '@/platform/updates/common/toastStore'
@@ -101,10 +101,24 @@ const maxSelectable = computed(() => {
   return 1
 })
 
-const itemsKey = computed(() => items.map((item) => item.id).join('|'))
+const itemsKey = ref<symbol>(Symbol())
 
 const filteredItems = ref<FormDropdownItem[]>([])
 
+watch(
+  () => items,
+  async (newItems, _old, onCleanup) => {
+    itemsKey.value = Symbol()
+    let cancelled = false
+    onCleanup(() => {
+      cancelled = true
+    })
+    const results = await searcher(searchQuery.value, newItems, () => {})
+    if (!cancelled) filteredItems.value = results
+  },
+  { immediate: true }
+)
+
 const defaultSorter = computed<SortOption['sorter']>(() => {
   const sorter = sortOptions.find((option) => option.id === 'default')?.sorter
   return sorter || (({ items: i }) => i.slice())

From b2c1f1f51a6ed5dcd0f3b68ca0ed47affe712d04 Mon Sep 17 00:00:00 2001
From: bymyself <cbyrne@comfy.org>
Date: Sat, 7 Mar 2026 18:39:05 -0800
Subject: [PATCH 2/5] fix: forward watcher cleanup into searcher

Addresses review feedback:
https://github.com/Comfy-Org/ComfyUI_frontend/pull/9551#discussion_r2901111651
---
 .../widgets/components/form/dropdown/FormDropdown.vue     | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.vue b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.vue
index 5715f1211e8..56a69a16e14 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.vue
@@ -110,10 +110,16 @@ watch(
   async (newItems, _old, onCleanup) => {
     itemsKey.value = Symbol()
     let cancelled = false
+    let cleanupFn: (() => void) | undefined
     onCleanup(() => {
       cancelled = true
+      cleanupFn?.()
     })
-    const results = await searcher(searchQuery.value, newItems, () => {})
+    const results = await searcher(
+      searchQuery.value,
+      newItems,
+      (cb) => (cleanupFn = cb)
+    )
     if (!cancelled) filteredItems.value = results
   },
   { immediate: true }

From 0f48eec2c68ab797f296453f81d40d1368ac41f4 Mon Sep 17 00:00:00 2001
From: Alexander Brown <448862+DrJKL@users.noreply.github.com>
Date: Mon, 9 Mar 2026 11:30:27 -0700
Subject: [PATCH 3/5] fix: restore media dropdown inputs for load widgets

- keep combo widget options object identity while providing dynamic values

- remove temporary dropdown debug logs and stale search prop plumbing

- update dropdown/combo tests and mock typing compatibility

Amp-Thread-ID: https://ampcode.com/threads/T-019cd3ac-3866-73df-93be-226ebe67fa09
Co-authored-by: Amp <amp@ampcode.com>
---
 .../form/dropdown/FormDropdown.test.ts        |  2 -
 .../components/form/dropdown/FormDropdown.vue | 51 ++++------------
 .../form/dropdown/FormDropdownMenu.vue        | 11 +---
 .../form/dropdown/FormDropdownMenuActions.vue |  9 ---
 .../composables/useComboWidget.test.ts        | 30 +++++++++-
 .../widgets/composables/useComboWidget.ts     | 58 +++++++++++--------
 6 files changed, 72 insertions(+), 89 deletions(-)

diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.test.ts b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.test.ts
index 77c1e689941..f8756cda7ee 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.test.ts
@@ -23,8 +23,6 @@ const MockFormDropdownMenu = defineComponent({
   name: 'FormDropdownMenu',
   props: {
     items: { type: Array as () => FormDropdownItem[], default: () => [] },
-    updateKey: { type: null, default: undefined },
-    searcher: { type: Function, default: undefined },
     isSelected: { type: Function, default: undefined },
     filterOptions: { type: Array, default: () => [] },
     sortOptions: { type: Array, default: () => [] },
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.vue b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.vue
index 56a69a16e14..a9574e566f8 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
+import { computedAsync, refDebounced } from '@vueuse/core'
 import Popover from 'primevue/popover'
-import { computed, ref, useTemplateRef, watch } from 'vue'
+import { computed, ref, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { useToastStore } from '@/platform/updates/common/toastStore'
@@ -101,29 +102,16 @@ const maxSelectable = computed(() => {
   return 1
 })
 
-const itemsKey = ref<symbol>(Symbol())
+const debouncedSearchQuery = refDebounced(searchQuery, 250, { maxWait: 1000 })
 
-const filteredItems = ref<FormDropdownItem[]>([])
-
-watch(
-  () => items,
-  async (newItems, _old, onCleanup) => {
-    itemsKey.value = Symbol()
-    let cancelled = false
-    let cleanupFn: (() => void) | undefined
-    onCleanup(() => {
-      cancelled = true
-      cleanupFn?.()
-    })
-    const results = await searcher(
-      searchQuery.value,
-      newItems,
-      (cb) => (cleanupFn = cb)
-    )
-    if (!cancelled) filteredItems.value = results
-  },
-  { immediate: true }
-)
+const filteredItems = computedAsync(async (onCancel) => {
+  let cleanupFn: (() => void) | undefined
+  onCancel(() => cleanupFn?.())
+  const result = await searcher(debouncedSearchQuery.value, items, (cb) => {
+    cleanupFn = cb
+  })
+  return result
+}, [])
 
 const defaultSorter = computed<SortOption['sorter']>(() => {
   const sorter = sortOptions.find((option) => option.id === 'default')?.sorter
@@ -191,21 +179,6 @@ function handleSelection(item: FormDropdownItem, index: number) {
     closeDropdown()
   }
 }
-
-async function customSearcher(
-  query: string,
-  onCleanup: (cleanupFn: () => void) => void
-) {
-  let isCleanup = false
-  let cleanupFn: undefined | (() => void)
-  onCleanup(() => {
-    isCleanup = true
-    cleanupFn?.()
-  })
-  await searcher(query, items, (cb) => (cleanupFn = cb)).then((results) => {
-    if (!isCleanup) filteredItems.value = results
-  })
-}
 </script>
 
 <template>
@@ -253,11 +226,9 @@ async function customSearcher(
         :show-base-model-filter
         :base-model-options
         :disabled
-        :searcher="customSearcher"
         :items="sortedItems"
         :is-selected="internalIsSelected"
         :max-selectable
-        :update-key="itemsKey"
         @close="closeDropdown"
         @item-click="handleSelection"
       />
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue
index 8d12c47e7a5..ae571d20210 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { CSSProperties, MaybeRefOrGetter } from 'vue'
+import type { CSSProperties } from 'vue'
 import { computed } from 'vue'
 
 import VirtualGrid from '@/components/common/VirtualGrid.vue'
@@ -20,11 +20,6 @@ interface Props {
   isSelected: (item: FormDropdownItem, index: number) => boolean
   filterOptions: FilterOption[]
   sortOptions: SortOption[]
-  searcher?: (
-    query: string,
-    onCleanup: (cleanupFn: () => void) => void
-  ) => Promise<void>
-  updateKey?: MaybeRefOrGetter<unknown>
   showOwnershipFilter?: boolean
   ownershipOptions?: OwnershipFilterOption[]
   showBaseModelFilter?: boolean
@@ -36,8 +31,6 @@ const {
   isSelected,
   filterOptions,
   sortOptions,
-  searcher,
-  updateKey,
   showOwnershipFilter,
   ownershipOptions,
   showBaseModelFilter,
@@ -118,8 +111,6 @@ const virtualItems = computed<VirtualDropdownItem[]>(() =>
       v-model:ownership-selected="ownershipSelected"
       v-model:base-model-selected="baseModelSelected"
       :sort-options
-      :searcher
-      :update-key
       :show-ownership-filter
       :ownership-options
       :show-base-model-filter
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
index e1c3a783ced..80c8095f020 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuActions.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { MaybeRefOrGetter } from 'vue'
-
 import Popover from 'primevue/popover'
 import { ref, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -19,12 +17,7 @@ import type { LayoutMode, SortOption } from './types'
 const { t } = useI18n()
 
 defineProps<{
-  searcher?: (
-    query: string,
-    onCleanup: (cleanupFn: () => void) => void
-  ) => Promise<void>
   sortOptions: SortOption[]
-  updateKey?: MaybeRefOrGetter<unknown>
   showOwnershipFilter?: boolean
   ownershipOptions?: OwnershipFilterOption[]
   showBaseModelFilter?: boolean
@@ -108,8 +101,6 @@ function toggleBaseModelSelection(item: FilterOption) {
   <div class="text-secondary flex gap-2 px-4">
     <FormSearchInput
       v-model="searchQuery"
-      :searcher
-      :update-key
       :class="
         cn(
           actionButtonStyle,
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts b/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts
index 2244b8b89f8..ea2d7ed1001 100644
--- a/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts
@@ -109,8 +109,15 @@ function createMockNode(comfyClass = 'TestNode'): LGraphNode {
 
   // Spy on the addWidget method
   vi.spyOn(node, 'addWidget').mockImplementation(
-    (type, name, value, callback) => {
-      const widget = createMockWidget({ type, name, value })
+    (type, name, value, callback, options = {}) => {
+      const normalizedOptions =
+        typeof options === 'string' ? { property: options } : options
+      const widget = createMockWidget({
+        type,
+        name,
+        value,
+        options: normalizedOptions
+      })
       // Store the callback function on the widget for testing
       if (typeof callback === 'function') {
         widget.callback = callback
@@ -320,7 +327,7 @@ describe('useComboWidget', () => {
           HASH_FILENAME,
           expect.any(Function),
           expect.objectContaining({
-            values: [], // Empty initially, populated dynamically by Proxy
+            values: [], // Empty initially, populated via dynamic getter
             getOptionLabel: expect.any(Function)
           })
         )
@@ -328,6 +335,23 @@ describe('useComboWidget', () => {
       }
     )
 
+    it('should keep the original options object for cloud input mappings', () => {
+      mockDistributionState.isCloud = true
+
+      const constructor = useComboWidget()
+      const mockNode = createMockNode('LoadImage')
+      const inputSpec = createMockInputSpec({
+        name: 'image',
+        options: [HASH_FILENAME]
+      })
+
+      const widget = constructor(mockNode, inputSpec)
+      const addWidgetCall = vi.mocked(mockNode.addWidget).mock.calls[0]
+      const options = addWidgetCall[4]
+
+      expect(widget.options).toBe(options)
+    })
+
     it("should format option labels using store's getInputName function", () => {
       mockDistributionState.isCloud = true
       mockGetInputName.mockReturnValue('Beautiful Sunset.png')
diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts
index 81267e9f3a2..c31933de7a9 100644
--- a/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts
@@ -44,6 +44,28 @@ const NODE_PLACEHOLDER_MAP: Record<string, string> = {
   LoadAudio: 'widgets.uploadSelect.placeholderAudio'
 }
 
+const bindDynamicValuesOption = (
+  widget: IBaseWidget,
+  getValues: () => unknown[]
+) => {
+  const options = widget.options
+  let fallbackValues = Array.isArray(options.values)
+    ? options.values
+    : ([] as unknown[])
+
+  Object.defineProperty(options, 'values', {
+    configurable: true,
+    enumerable: true,
+    get: () => {
+      const values = getValues()
+      return Array.isArray(values) ? values : fallbackValues
+    },
+    set: (values: unknown[]) => {
+      fallbackValues = Array.isArray(values) ? values : fallbackValues
+    }
+  })
+}
+
 const addMultiSelectWidget = (
   node: LGraphNode,
   inputSpec: ComboInputSpec
@@ -133,22 +155,16 @@ const createInputMappingWidget = (
     })
   }
 
-  const origOptions = widget.options
-  widget.options = new Proxy(origOptions, {
-    get(target, prop) {
-      if (prop !== 'values') {
-        return target[prop as keyof typeof target]
-      }
-      return assetsStore.inputAssets
-        .filter(
-          (asset) =>
-            getMediaTypeFromFilename(asset.name) ===
-            NODE_MEDIA_TYPE_MAP[node.comfyClass ?? '']
-        )
-        .map((asset) => asset.asset_hash)
-        .filter((hash): hash is string => !!hash)
-    }
-  })
+  bindDynamicValuesOption(widget, () =>
+    assetsStore.inputAssets
+      .filter(
+        (asset) =>
+          getMediaTypeFromFilename(asset.name) ===
+          NODE_MEDIA_TYPE_MAP[node.comfyClass ?? '']
+      )
+      .map((asset) => asset.asset_hash)
+      .filter((hash): hash is string => !!hash)
+  )
 
   if (inputSpec.control_after_generate) {
     if (!isComboWidget(widget)) {
@@ -210,15 +226,7 @@ const addComboWidget = (
     })
     if (inputSpec.remote.refresh_button) remoteWidget.addRefreshButton()
 
-    const origOptions = widget.options
-    widget.options = new Proxy(origOptions, {
-      get(target, prop) {
-        // Assertion: Proxy handler passthrough
-        return prop !== 'values'
-          ? target[prop as keyof typeof target]
-          : remoteWidget.getValue()
-      }
-    })
+    bindDynamicValuesOption(widget, () => remoteWidget.getValue())
   }
 
   if (inputSpec.control_after_generate) {

From 6c2d77a36b6c81bf85a25b7052fc4c3280d57ce4 Mon Sep 17 00:00:00 2001
From: Alexander Brown <448862+DrJKL@users.noreply.github.com>
Date: Mon, 9 Mar 2026 11:47:59 -0700
Subject: [PATCH 4/5] fix: pass through non-array values in
 bindDynamicValuesOption

The getter was discarding non-array values like 'Loading...' and returning empty fallback array instead.

Amp-Thread-ID: https://ampcode.com/threads/T-019cd3ec-0132-730b-b6e7-b30df01bd775
Co-authored-by: Amp <amp@ampcode.com>
---
 .../vueNodes/widgets/composables/useComboWidget.ts           | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts
index c31933de7a9..895462c19b8 100644
--- a/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts
@@ -46,7 +46,7 @@ const NODE_PLACEHOLDER_MAP: Record<string, string> = {
 
 const bindDynamicValuesOption = (
   widget: IBaseWidget,
-  getValues: () => unknown[]
+  getValues: () => unknown
 ) => {
   const options = widget.options
   let fallbackValues = Array.isArray(options.values)
@@ -58,7 +58,8 @@ const bindDynamicValuesOption = (
     enumerable: true,
     get: () => {
       const values = getValues()
-      return Array.isArray(values) ? values : fallbackValues
+      if (values === undefined || values === null) return fallbackValues
+      return values
     },
     set: (values: unknown[]) => {
       fallbackValues = Array.isArray(values) ? values : fallbackValues

From 39638c1c695bf8216af4e381ab42d102469a5c57 Mon Sep 17 00:00:00 2001
From: Alexander Brown <448862+DrJKL@users.noreply.github.com>
Date: Mon, 9 Mar 2026 12:08:56 -0700
Subject: [PATCH 5/5] fix: replace stacked nextTick with flushPromises in
 FormDropdown tests

computedAsync produces promises that nextTick alone does not reliably drain. Use flushPromises from @vue/test-utils to properly settle the async computed before asserting.

Amp-Thread-ID: https://ampcode.com/threads/T-019cd3ff-0573-71c3-8e8f-0bb8e52870cb
Co-authored-by: Amp <amp@ampcode.com>
---
 .../form/dropdown/FormDropdown.test.ts        | 25 +++++++------------
 1 file changed, 9 insertions(+), 16 deletions(-)

diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.test.ts b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.test.ts
index f8756cda7ee..50765a98465 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.test.ts
@@ -1,8 +1,8 @@
-import { mount } from '@vue/test-utils'
+import { flushPromises, mount } from '@vue/test-utils'
 import PrimeVue from 'primevue/config'
 import { createI18n } from 'vue-i18n'
 import { describe, expect, it, vi } from 'vitest'
-import { defineComponent, h, nextTick } from 'vue'
+import { defineComponent, h } from 'vue'
 
 import FormDropdown from './FormDropdown.vue'
 import type { FormDropdownItem } from './types'
@@ -67,8 +67,7 @@ describe('FormDropdown', () => {
         createItem('input-0', 'video1.mp4'),
         createItem('input-1', 'video2.mp4')
       ])
-      await nextTick()
-      await nextTick()
+      await flushPromises()
 
       expect(getMenuItems(wrapper)).toHaveLength(2)
 
@@ -78,8 +77,7 @@ describe('FormDropdown', () => {
           createItem('output-1', 'rendered2.mp4')
         ]
       })
-      await nextTick()
-      await nextTick()
+      await flushPromises()
 
       const menuItems = getMenuItems(wrapper)
       expect(menuItems).toHaveLength(2)
@@ -88,33 +86,28 @@ describe('FormDropdown', () => {
 
     it('updates when items change but IDs stay the same', async () => {
       const wrapper = mountDropdown([createItem('1', 'alpha')])
-      await nextTick()
-      await nextTick()
+      await flushPromises()
 
       await wrapper.setProps({ items: [createItem('1', 'beta')] })
-      await nextTick()
-      await nextTick()
+      await flushPromises()
 
       expect(getMenuItems(wrapper)[0].name).toBe('beta')
     })
 
     it('updates when switching between empty and non-empty items', async () => {
       const wrapper = mountDropdown([])
-      await nextTick()
-      await nextTick()
+      await flushPromises()
 
       expect(getMenuItems(wrapper)).toHaveLength(0)
 
       await wrapper.setProps({ items: [createItem('1', 'video.mp4')] })
-      await nextTick()
-      await nextTick()
+      await flushPromises()
 
       expect(getMenuItems(wrapper)).toHaveLength(1)
       expect(getMenuItems(wrapper)[0].name).toBe('video.mp4')
 
       await wrapper.setProps({ items: [] })
-      await nextTick()
-      await nextTick()
+      await flushPromises()
 
       expect(getMenuItems(wrapper)).toHaveLength(0)
     })