From d4605905d3ef32807ae39e8f409753fd5e1e9b7f Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Wed, 13 Mar 2024 19:58:24 +0100
Subject: [PATCH] fix(filters): do not fire filter change immediately

Related to https://kolaente.dev/vikunja/vikunja/issues/2194#issuecomment-61081
---
 .../components/project/partials/FilterInput.vue  |  7 ++++++-
 .../src/components/project/partials/filters.vue  | 16 ++++++++++++----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/project/partials/FilterInput.vue b/frontend/src/components/project/partials/FilterInput.vue
index d668fde47..518d71033 100644
--- a/frontend/src/components/project/partials/FilterInput.vue
+++ b/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"
diff --git a/frontend/src/components/project/partials/filters.vue b/frontend/src/components/project/partials/filters.vue
index c614af99e..3c6e6a9fd 100644
--- a/frontend/src/components/project/partials/filters.vue
+++ b/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 = ''