From 6f9340192bb315d06d9bebc38fdb73e387eb5387 Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Mon, 28 Aug 2023 11:48:30 +0200
Subject: [PATCH] Set focus to search bar

---
 client/src/components/instruments/FilterBar.vue | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/client/src/components/instruments/FilterBar.vue b/client/src/components/instruments/FilterBar.vue
index 365f6730..b6120fac 100644
--- a/client/src/components/instruments/FilterBar.vue
+++ b/client/src/components/instruments/FilterBar.vue
@@ -2,6 +2,7 @@
   <div class="filter-bar">
     <div class="filter-bar__input-wrapper">
       <input
+        ref="searchInputRef"
         class="filter-bar__search-input"
         type="text"
         placeholder="Suchbegriff eingeben..."
@@ -9,7 +10,6 @@
         @input="updateSearch"
       />
       <SearchMagnifyingGlass class="filter-bar__search-icon"></SearchMagnifyingGlass>
-      <!-- Font Awesome search icon as an example -->
     </div>
     <language-switcher class="filter-bar__language-selection"/>
 
@@ -17,16 +17,23 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, onMounted} from 'vue';
 import SearchMagnifyingGlass from '@/components/icons/SearchMagnifyingGlass.vue';
 import LanguageSwitcher from "@/components/LanguageSwitcher.vue";
 
 const searchQuery = ref('');
+const searchInputRef = ref(null);
+
+
 const emit = defineEmits(['update:filter']);
 
 const updateSearch = () => {
   emit('update:filter', searchQuery.value);
 };
+
+onMounted(() => {
+  searchInputRef.value?.focus();
+});
 </script>
 
 <style scoped lang="scss">