Set focus to search bar

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">