feat(filter): automatically focus filter input when opening filter popup

Resolves https://github.com/go-vikunja/vikunja/issues/552

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>

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,

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>