diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.test.ts b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.test.ts index 42e725485..128ffaa3d 100644 --- a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.test.ts +++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.test.ts @@ -196,31 +196,46 @@ describe('WidgetSelectDropdown custom label mapping', () => { expect(dropdownItems[0].id).toBe('missing-template_image.png') }) - it('does not include fallback item when filter is "inputs" or "outputs"', async () => { + it('does not include fallback item when filter is "inputs"', async () => { const widget = createMockWidget('template_image.png', { values: ['img_001.png', 'photo_abc.jpg'] }) const wrapper = mountComponent(widget, 'template_image.png') - // Set filter to 'inputs' - await wrapper.setProps({ filterSelected: 'inputs' } as never) - await wrapper.vm.$nextTick() - const vmWithFilter = wrapper.vm as unknown as { filterSelected: string dropdownItems: DropdownItem[] } - // Manually update filterSelected since it's a model vmWithFilter.filterSelected = 'inputs' await wrapper.vm.$nextTick() - // inputItems should not contain the missing value - expect(wrapper.vm.inputItems).toHaveLength(2) + const dropdownItems = vmWithFilter.dropdownItems + expect(dropdownItems).toHaveLength(2) expect( - wrapper.vm.inputItems.every( - (item) => !String(item.id).startsWith('missing-') - ) + dropdownItems.every((item) => !String(item.id).startsWith('missing-')) + ).toBe(true) + }) + + it('does not include fallback item when filter is "outputs"', async () => { + const widget = createMockWidget('template_image.png', { + values: ['img_001.png', 'photo_abc.jpg'] + }) + const wrapper = mountComponent(widget, 'template_image.png') + + const vmWithFilter = wrapper.vm as unknown as { + filterSelected: string + dropdownItems: DropdownItem[] + outputItems: DropdownItem[] + } + + vmWithFilter.filterSelected = 'outputs' + await wrapper.vm.$nextTick() + + const dropdownItems = vmWithFilter.dropdownItems + expect(dropdownItems).toHaveLength(wrapper.vm.outputItems.length) + expect( + dropdownItems.every((item) => !String(item.id).startsWith('missing-')) ).toBe(true) }) diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue index 95237f5b7..ad8b57e32 100644 --- a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue +++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDropdown.vue @@ -164,9 +164,14 @@ const missingValueItem = computed(() => { if (existsInInputs || existsInOutputs) return null + const isOutput = currentValue.endsWith(' [output]') + const strippedValue = isOutput + ? currentValue.replace(' [output]', '') + : currentValue + return { id: `missing-${currentValue}`, - mediaSrc: getMediaUrl(currentValue, 'input'), + mediaSrc: getMediaUrl(strippedValue, isOutput ? 'output' : 'input'), name: currentValue, label: getDisplayLabel(currentValue), metadata: '' @@ -177,11 +182,11 @@ const allItems = computed(() => { if (props.isAssetMode && assetData) { return assetData.dropdownItems.value } - const items = [...inputItems.value, ...outputItems.value] - if (missingValueItem.value) { - items.unshift(missingValueItem.value) - } - return items + return [ + ...(missingValueItem.value ? [missingValueItem.value] : []), + ...inputItems.value, + ...outputItems.value + ] }) const dropdownItems = computed(() => {