fix(KtField*SelectRemote): Add Value <-> Label Cache

3YOURMIND · May 25, 2022 · 57b540a · 57b540a
1 parent ae41068
commit 57b540a
Showing 1 changed file with 28 additions and 20 deletions.
diff --git 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<Map<Shared.Value, string>>(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;