From 2c25e607611ddd68ae10facdaaf56d919fffe1e8 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 10 Aug 2025 17:02:06 +0200
Subject: [PATCH] feat(filter): automatically focus filter input when opening
 filter popup

Resolves https://github.com/go-vikunja/vikunja/issues/552
---
 .../src/components/input/filter/FilterInput.vue    |  8 ++++++++
 .../components/project/partials/FilterPopup.vue    | 14 ++++++++++++--
 .../src/components/project/partials/Filters.vue    | 11 +++++++++++
 3 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/input/filter/FilterInput.vue b/frontend/src/components/input/filter/FilterInput.vue
index 0c1a7b1c2..822552dfd 100644
--- a/frontend/src/components/input/filter/FilterInput.vue
+++ b/frontend/src/components/input/filter/FilterInput.vue
@@ -179,9 +179,17 @@ function updateDateInQuery(newDate: string | Date | null) {
 const blurDebounced = useDebounceFn(() => {
 }, 500)
 
+function focus() {
+	editor.value?.commands.focus()
+}
+
 onBeforeUnmount(() => {
 	editor.value?.destroy()
 })
+
+defineExpose({
+	focus,
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/project/partials/FilterPopup.vue b/frontend/src/components/project/partials/FilterPopup.vue
index abde68913..edf87e369 100644
--- a/frontend/src/components/project/partials/FilterPopup.vue
+++ b/frontend/src/components/project/partials/FilterPopup.vue
@@ -15,7 +15,7 @@
 		@close="() => modalOpen = false"
 	>
 		<Filters
-			ref="filters"
+			ref="filtersRef"
 			v-model="value"
 			:has-title="true"
 			class="filter-popup"
@@ -27,7 +27,7 @@
 </template>
 
 <script setup lang="ts">
-import {computed, ref, watch} from 'vue'
+import {computed, ref, watch, nextTick} from 'vue'
 
 import Filters from '@/components/project/partials/Filters.vue'
 
@@ -49,6 +49,7 @@ const emit = defineEmits<{
 const projectStore = useProjectStore()
 
 const value = ref<TaskFilterParams>({})
+const filtersRef = ref()
 
 watch(
 	() => props.modelValue,
@@ -68,6 +69,15 @@ const hasFilters = computed(() => {
 
 const modalOpen = ref(false)
 
+// Auto-focus filter input when modal opens
+watch(modalOpen, (isOpen) => {
+	if (isOpen) {
+		nextTick(() => {
+			filtersRef.value?.focusFilterInput()
+		})
+	}
+})
+
 function showResults() {
 	emit('update:modelValue', {
 		...value.value,
diff --git a/frontend/src/components/project/partials/Filters.vue b/frontend/src/components/project/partials/Filters.vue
index 39972d57a..609bb1fd7 100644
--- a/frontend/src/components/project/partials/Filters.vue
+++ b/frontend/src/components/project/partials/Filters.vue
@@ -5,6 +5,7 @@
 		role="search"
 	>
 		<FilterInput
+			ref="filterInputRef"
 			v-model="filterQuery"
 			:project-id="projectId"
 			@update:modelValue="() => change('modelValue')"
@@ -118,6 +119,8 @@ watch(
 const labelStore = useLabelStore()
 const projectStore = useProjectStore()
 
+const filterInputRef = ref()
+
 // Using watchDebounced to prevent the filter re-triggering itself.
 watch(
 	() => props.modelValue,
@@ -184,4 +187,12 @@ function clearFiltersAndEmit() {
 	filterQuery.value = ''
 	changeAndEmitButton()
 }
+
+function focusFilterInput() {
+	filterInputRef.value?.focus()
+}
+
+defineExpose({
+	focusFilterInput,
+})
 </script>