diff --git a/packages/kotti-ui/source/kotti-field-select/components/GenericSelectField.vue b/packages/kotti-ui/source/kotti-field-select/components/GenericSelectField.vue index c2e1616418..6a4a937c65 100644 --- a/packages/kotti-ui/source/kotti-field-select/components/GenericSelectField.vue +++ b/packages/kotti-ui/source/kotti-field-select/components/GenericSelectField.vue @@ -178,6 +178,26 @@ export default defineComponent< props.isRemote ? props.query : localQuery.value, ) + /** + * keeps reference of already seen option labels so that + * the tags can be rendered properly when filtering remotely + */ + const seenValueLabelMap = ref>(new Map()) + + watch( + () => props.options, + () => { + seenValueLabelMap.value = new Map([ + ...seenValueLabelMap.value, + ...props.options.map((option): [Shared.Value, string] => [ + option.value, + option.label, + ]), + ]) + }, + { immediate: true }, + ) + return { collapsedTagCount: computed(() => props.isMultiple @@ -200,7 +220,6 @@ export default defineComponent< forceUpdateKey: forceUpdateKey.value, placeholder: props.placeholder ?? undefined, size: 1, - style: 'flex: 1', type: 'text', value: (() => { if (isDropdownOpen.value) return queryValue.value ?? undefined @@ -262,25 +281,13 @@ export default defineComponent< props.isMultiple ? (field.currentValue as MultiValue) .filter((_, index) => index < props.collapseTagsAfter) - .map((value): Shared.Option => { - const option = props.options.find( - (option) => option.value === value, - ) - - // if (!option) - // TODO: incompatible with multi remote - // throw new Error( - // `Couldn’t find option with value “${String(value)}”`, - // ) - - if (!option) - return { - label: String(value), - value: value as SingleValue, - } - - return option - }) + .map( + (value): Shared.Option => + props.options.find((option) => option.value === value) ?? { + label: seenValueLabelMap.value.get(value) ?? String(value), + value, + }, + ) : [], ), Yoco, @@ -361,6 +368,7 @@ export default defineComponent< &__wrapper { display: flex; + flex: 1; min-width: 30%; /* TODO: necessary? */ padding: 0; margin: 0;