From 6973d76e1790808df087a29e2bd6f1dcf8d2211b Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Mon, 11 Jul 2022 19:55:03 +0200
Subject: [PATCH] feat: select a value when there is one exact match in
 multiselect

Related to #2107
---
 src/components/input/multiselect.vue | 27 ++++++++++++++++++++-------
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/components/input/multiselect.vue b/src/components/input/multiselect.vue
index 2525217f..f26c6604 100644
--- a/src/components/input/multiselect.vue
+++ b/src/components/input/multiselect.vue
@@ -89,6 +89,15 @@ import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 
 import BaseButton from '@/components/base/BaseButton.vue'
 
+function elementInResults(elem: string | any, label: string, query: string): boolean {
+	// Don't make create available if we have an exact match in our search results.
+	if (label !== '') {
+		return elem[label] === query
+	}
+
+	return elem === query
+}
+
 export default defineComponent({
 	name: 'multiselect',
 	components: {
@@ -222,14 +231,12 @@ export default defineComponent({
 			)
 		},
 		creatableAvailable() {
-			return this.creatable && this.query !== '' && !this.filteredSearchResults.some(elem => {
-				// Don't make create available if we have an exact match in our search results.
-				if (this.label !== '') {
-					return elem[this.label] === this.query
-				}
+			const hasResult = this.filteredSearchResults.some(elem => elementInResults(elem, this.label, this.query))
+			const hasQueryAlreadyAdded = Array.isArray(this.internalValue) && this.internalValue.some(elem => elementInResults(elem, this.label, this.query))
 
-				return elem === this.query
-			})
+			return this.creatable 
+				&& this.query !== '' 
+				&& !(hasResult || hasQueryAlreadyAdded)
 		},
 		filteredSearchResults() {
 			if (this.multiple && this.internalValue !== null && Array.isArray(this.internalValue)) {
@@ -352,6 +359,12 @@ export default defineComponent({
 			}
 
 			if (!this.creatableAvailable) {
+				// Check if there's an exact match for our search term
+				const exactMatch = this.filteredSearchResults.find(elem => elementInResults(elem, this.label, this.query))
+				if(exactMatch) {
+					this.select(exactMatch)
+				}
+
 				return
 			}