From: Adam Dullage <redacted>
Date: Sat, 4 May 2024 10:52:47 +0000 (+0100)
Subject: Add focus to search input on component mount
X-Git-Url: http://git.99rst.org/?a=commitdiff_plain;h=7525856941cfb78b6b725981516542f70a10a5eb;p=flatnotes.git

Add focus to search input on component mount
---

diff --git a/client/partials/SearchInput.vue b/client/partials/SearchInput.vue
index abf0506..7b9d348 100644
--- a/client/partials/SearchInput.vue
+++ b/client/partials/SearchInput.vue
@@ -4,6 +4,7 @@
       v-model="searchTerm"
       placeholder="Search"
       class="rounded-r-none"
+      ref="textInput"
     />
     <CustomButton
       :iconPath="mdilMagnify"
@@ -16,7 +17,7 @@
 <script setup>
 import { mdilMagnify } from "@mdi/light-js";
 import { useToast } from "primevue/usetoast";
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import * as constants from "../constants";
 
@@ -28,6 +29,7 @@ const props = defineProps({ initialSearchTerm: String });
 const emit = defineEmits(["search"]);
 
 const router = useRouter();
+const textInput = ref();
 const searchTerm = ref(props.initialSearchTerm);
 const toast = useToast();
 
@@ -42,4 +44,8 @@ function search() {
     toast.add(getToastOptions("Error", "Please enter a search term.", true));
   }
 }
+
+onMounted(() => {
+  textInput.value.focus();
+});
 </script>