fix(filters): do not fire filter change immediately

Related to #2194 (comment)

frontend/src/components/project/partials/FilterInput.vue

@@ -20,6 +20,7 @@ import {
 	getFilterFieldRegexPattern,
 	LABEL_FIELDS,
 } from '@/helpers/filters'
+import {useDebounceFn} from '@vueuse/core'
 
 const {
 	modelValue,
@@ -236,6 +237,10 @@ function autocompleteSelect(value) {
 
 	autocompleteResults.value = []
 }
+
+// The blur from the textarea might happen before the replacement after autocomplete select was done.
+// That caused listeners to try and replace values earlier, resulting in broken queries.
+const blurDebounced = useDebounceFn(() => emit('blur'), 500)
 </script>
 
 <template>
@@ -264,7 +269,7 @@ function autocompleteSelect(value) {
 						@input="handleFieldInput"
 						@focus="onFocusField"
 						@keydown="onKeydown"
-						@blur="e => emit('blur', e)"
+						@blur="blurDebounced"
 					/>
 					<div
 						class="filter-input-highlight"

frontend/src/components/project/partials/filters.vue

@@ -19,7 +19,7 @@
 			</Fancycheckbox>
 		</div>
 
-		<FilterInputDocs />
+		<FilterInputDocs/>
 
 		<template
 			v-if="hasFooter"
@@ -59,8 +59,8 @@ import {useProjectStore} from '@/stores/projects'
 import {FILTER_OPERATORS, transformFilterStringForApi, transformFilterStringFromApi} from '@/helpers/filters'
 import FilterInputDocs from '@/components/project/partials/FilterInputDocs.vue'
 
-const  {
-	hasTitle= false,
+const {
+	hasTitle = false,
 	hasFooter = true,
 	modelValue,
 } = defineProps<{
@@ -110,7 +110,15 @@ function change() {
 	const filter = transformFilterStringForApi(
 		params.value.filter,
 		labelTitle => labelStore.filterLabelsByQuery([], labelTitle)[0]?.id || null,
-		projectTitle => projectStore.searchProject(projectTitle)[0]?.id || null,
+		projectTitle => {
+			const found = projectStore.findProjectByExactname(projectTitle)
+
+			if (found === null) {
+				return null
+			}
+
+			return found[0]?.id || null
+		},
 	)
 
 	let s = ''