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:
Rizumu Ayaka
2026-01-27 09:40:33 +07:00
committed by GitHub
parent 88fba25617
commit e5e51c8e00
3 changed files with 11 additions and 0 deletions

View File

@@ -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"
/> />

View File

@@ -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">

View File

@@ -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,