mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-29 18:52:19 +00:00
fix: image selection modal Inputs Outputs filtering is not working (#8272)
filteredItems only updates during search, and does not update when the filter changes. Trigger a re-search when items change through the updateKey prop chain.
This commit is contained in:
@@ -78,6 +78,8 @@ const maxSelectable = computed(() => {
|
|||||||
return 1
|
return 1
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const itemsKey = computed(() => props.items.map((item) => item.id).join('|'))
|
||||||
|
|
||||||
const filteredItems = ref<DropdownItem[]>([])
|
const filteredItems = ref<DropdownItem[]>([])
|
||||||
|
|
||||||
const defaultSorter = computed<SortOption['sorter']>(() => {
|
const defaultSorter = computed<SortOption['sorter']>(() => {
|
||||||
@@ -209,6 +211,7 @@ async function customSearcher(
|
|||||||
:items="sortedItems"
|
:items="sortedItems"
|
||||||
:is-selected="internalIsSelected"
|
:is-selected="internalIsSelected"
|
||||||
:max-selectable="maxSelectable"
|
:max-selectable="maxSelectable"
|
||||||
|
:update-key="itemsKey"
|
||||||
@close="closeDropdown"
|
@close="closeDropdown"
|
||||||
@item-click="handleSelection"
|
@item-click="handleSelection"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -1,4 +1,6 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import type { MaybeRefOrGetter } from 'vue'
|
||||||
|
|
||||||
import { cn } from '@/utils/tailwindUtil'
|
import { cn } from '@/utils/tailwindUtil'
|
||||||
|
|
||||||
import FormDropdownMenuActions from './FormDropdownMenuActions.vue'
|
import FormDropdownMenuActions from './FormDropdownMenuActions.vue'
|
||||||
@@ -21,6 +23,7 @@ interface Props {
|
|||||||
query: string,
|
query: string,
|
||||||
onCleanup: (cleanupFn: () => void) => void
|
onCleanup: (cleanupFn: () => void) => void
|
||||||
) => Promise<void>
|
) => Promise<void>
|
||||||
|
updateKey?: MaybeRefOrGetter<unknown>
|
||||||
}
|
}
|
||||||
|
|
||||||
defineProps<Props>()
|
defineProps<Props>()
|
||||||
@@ -54,6 +57,7 @@ const searchQuery = defineModel<string>('searchQuery')
|
|||||||
v-model:search-query="searchQuery"
|
v-model:search-query="searchQuery"
|
||||||
:sort-options="sortOptions"
|
:sort-options="sortOptions"
|
||||||
:searcher
|
:searcher
|
||||||
|
:update-key="updateKey"
|
||||||
/>
|
/>
|
||||||
<!-- List -->
|
<!-- List -->
|
||||||
<div class="relative flex h-full mt-2 overflow-y-scroll">
|
<div class="relative flex h-full mt-2 overflow-y-scroll">
|
||||||
|
|||||||
@@ -1,4 +1,6 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import type { MaybeRefOrGetter } from 'vue'
|
||||||
|
|
||||||
import Popover from 'primevue/popover'
|
import Popover from 'primevue/popover'
|
||||||
import { ref, useTemplateRef } from 'vue'
|
import { ref, useTemplateRef } from 'vue'
|
||||||
|
|
||||||
@@ -13,6 +15,7 @@ defineProps<{
|
|||||||
onCleanup: (cleanupFn: () => void) => void
|
onCleanup: (cleanupFn: () => void) => void
|
||||||
) => Promise<void>
|
) => Promise<void>
|
||||||
sortOptions: SortOption[]
|
sortOptions: SortOption[]
|
||||||
|
updateKey?: MaybeRefOrGetter<unknown>
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const layoutMode = defineModel<LayoutMode>('layoutMode')
|
const layoutMode = defineModel<LayoutMode>('layoutMode')
|
||||||
@@ -53,6 +56,7 @@ function handleSortSelected(item: SortOption) {
|
|||||||
<FormSearchInput
|
<FormSearchInput
|
||||||
v-model="searchQuery"
|
v-model="searchQuery"
|
||||||
:searcher
|
:searcher
|
||||||
|
:update-key="updateKey"
|
||||||
:class="
|
:class="
|
||||||
cn(
|
cn(
|
||||||
actionButtonStyle,
|
actionButtonStyle,
|
||||||
|
|||||||
Reference in New Issue
Block a user