diff --git a/frontend/src/shared/modules/filters/components/filterTypes/MultiSelectAsyncFilter.vue b/frontend/src/shared/modules/filters/components/filterTypes/MultiSelectAsyncFilter.vue index d8fe876c65..a2d6331a8a 100644 --- a/frontend/src/shared/modules/filters/components/filterTypes/MultiSelectAsyncFilter.vue +++ b/frontend/src/shared/modules/filters/components/filterTypes/MultiSelectAsyncFilter.vue @@ -26,6 +26,7 @@ :value="option" >
@@ -113,7 +114,24 @@ watch(() => props.modelValue.value, (value?: string[]) => { } }, { immediate: true }); -watch(() => data.value.selected, (value) => { +watch(() => data.value.selected, (value, oldValue) => { + if (props.config.id === 'tags') { + filteredOptions.value = filteredOptions.value.filter((option) => !value.map((v: any) => v.value).includes(option.value)); + + const removedOption: any = oldValue?.find((option: any) => !value.includes(option)); + + if (removedOption && !filteredOptions.value.some((option) => option.value === removedOption.value)) { + const position = oldValue.findIndex((option: any) => option.value === removedOption.value); + + if (position >= 0) { + filteredOptions.value.splice(position, 0, { + label: removedOption.label, + value: removedOption.value, + }); + } + } + } + emit('update:modelValue', { ...props.modelValue, value: value.map((v) => v.value), @@ -127,7 +145,15 @@ const searchOptions = (query: string) => { loading.value = true; props.remoteMethod(query) .then((options) => { - filteredOptions.value = options; + if (props.config.id === 'tags') { + const mappedOptions = options.map((option) => ({ + label: option.label, + value: option.value, + })); + filteredOptions.value = mappedOptions; + } else { + filteredOptions.value = options; + } }) .finally(() => { loading.value = false;