From 9e814e319f65c7736ed1bf289fdc96f1375560e5 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Fri, 14 Mar 2025 15:38:19 +0100
Subject: [PATCH] Set initial focus event creation

---
 components/calendar/form/CreateEvent.vue | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/components/calendar/form/CreateEvent.vue b/components/calendar/form/CreateEvent.vue
index bc2396e..a7a82a9 100644
--- a/components/calendar/form/CreateEvent.vue
+++ b/components/calendar/form/CreateEvent.vue
@@ -2,12 +2,20 @@
 import type { RPGDate } from "~/models/Date";
 import { PhAlarm, PhCircleNotch, PhEye, PhEyeClosed, PhMapPinArea, PhTag } from "@phosphor-icons/vue"
 
+const { t } = useI18n()
+
 const emit = defineEmits(["event-created"])
 
+const props = defineProps<{
+  date?: RPGDate
+  btnClass?: string
+}>()
+
 const { eventSkeleton } = storeToRefs(useCalendar())
 const { submitSkeleton, cancelLatestRequest } = useCalendar()
 
-const { t } = useI18n()
+const newEventTitle = shallowRef<HTMLInputElement>()
+useFocus(newEventTitle, { initialValue: true })
 
 const isLoading = ref(false)
 
@@ -15,11 +23,6 @@ const formErrors = reactive<{ message: string | null }>({
   message: null
 })
 
-const props = defineProps<{
-  date?: RPGDate
-  btnClass?: string
-}>()
-
 async function handleSubmit() {
   // Prevent form submission if already loading
   if (isLoading.value) return
@@ -56,6 +59,7 @@ function handleCancel() {
       <div class="col-span-2 pl-8">
         <input
           id="new-event-title"
+          ref="newEventTitle"
           v-model="eventSkeleton.title"
           type="text"
           name="new-event-title"