From 533e778b9347dedea339eed46c10d45932c8089e Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Fri, 8 Mar 2024 19:07:48 +0100
Subject: [PATCH] fix(filter): bubble filter query changes up on blur only

---
 .../components/project/partials/FilterInput.vue  | 13 ++++++++++---
 .../src/components/project/partials/filters.vue  | 16 ++++++++--------
 frontend/src/i18n/lang/en.json                   |  3 ++-
 3 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/project/partials/FilterInput.vue b/frontend/src/components/project/partials/FilterInput.vue
index a9d2d411e..33ea0359c 100644
--- a/frontend/src/components/project/partials/FilterInput.vue
+++ b/frontend/src/components/project/partials/FilterInput.vue
@@ -29,7 +29,7 @@ const {
 	projectId?: number,
 }>()
 
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue', 'blur'])
 
 const filterQuery = ref<string>('')
 const {
@@ -257,6 +257,8 @@ function autocompleteSelect(value) {
 						class="input"
 						:class="{'has-autocomplete-results': autocompleteResults.length > 0}"
 						ref="filterInput"
+						:placeholder="$t('filters.query.placeholder')"
+						@blur="e => emit('blur', e)"
 					></textarea>
 					<div
 						class="filter-input-highlight"
@@ -344,10 +346,15 @@ function autocompleteSelect(value) {
 
 	textarea {
 		position: absolute;
-		text-fill-color: transparent;
-		-webkit-text-fill-color: transparent;
 		background: transparent !important;
 		resize: none;
+		text-fill-color: transparent;
+		-webkit-text-fill-color: transparent;
+		
+		&::placeholder {
+			text-fill-color: var(--input-placeholder-color);
+			-webkit-text-fill-color: var(--input-placeholder-color);
+		}
 
 		&.has-autocomplete-results {
 			border-radius: var(--input-radius) var(--input-radius) 0 0;
diff --git a/frontend/src/components/project/partials/filters.vue b/frontend/src/components/project/partials/filters.vue
index bb3fed41c..96b1c278f 100644
--- a/frontend/src/components/project/partials/filters.vue
+++ b/frontend/src/components/project/partials/filters.vue
@@ -4,20 +4,21 @@
 		:title="hasTitle ? $t('filters.title') : ''"
 		role="search"
 	>
+		<FilterInput 
+			v-model="params.filter"
+			:project-id="projectId"
+			@blur="change()"
+		/>
+		
 		<div class="field is-flex is-flex-direction-column">
 			<Fancycheckbox
 				v-model="params.filter_include_nulls"
-				@update:modelValue="change()"
+				@blur="change()"
 			>
 				{{ $t('filters.attributes.includeNulls') }}
 			</Fancycheckbox>
 		</div>
 		
-		<FilterInput 
-			v-model="params.filter"
-			:project-id="projectId"
-		/>
-		
 		<template #footer>
 			<x-button
 				variant="primary"
@@ -37,7 +38,6 @@ export const ALPHABETICAL_SORT = 'title'
 import {computed, ref} from 'vue'
 import {watchDebounced} from '@vueuse/core'
 import Fancycheckbox from '@/components/input/fancycheckbox.vue'
-import {objectToSnakeCase} from '@/helpers/case'
 import FilterInput from '@/components/project/partials/FilterInput.vue'
 import {useRoute} from 'vue-router'
 import type {TaskFilterParams} from '@/services/taskCollection'
@@ -75,7 +75,7 @@ const params = ref<TaskFilterParams>({
 watchDebounced(
 	() => modelValue.value,
 	(value: TaskFilterParams) => {
-		const val = value
+		const val = {...value}
 		val.filter = transformFilterStringFromApi(
 			val?.filter || '',
 			labelId => labelStore.getLabelById(labelId),
diff --git a/frontend/src/i18n/lang/en.json b/frontend/src/i18n/lang/en.json
index f0e8d3462..4d8e6aa7e 100644
--- a/frontend/src/i18n/lang/en.json
+++ b/frontend/src/i18n/lang/en.json
@@ -418,7 +418,8 @@
       "success": "The filter was saved successfully."
     },
     "query": {
-      "title": "Query"
+      "title": "Query",
+      "placeholder": "Type a search or filter query…"
     }
   },
   "migrate": {