Fixed focus issues on modals closing

components/calendar/dialog/Create.vue

@@ -22,7 +22,7 @@ function handleClose() {
 
 <template>
   <UiAlertDialog :open="modalState">
-    <UiAlertDialogContent class="grid grid-rows-[auto_1fr_auto] items-start min-h-[66vh] max-w-4xl gap-6">
+    <UiAlertDialogContent class="grid grid-rows-[auto_1fr_auto] items-start min-h-[66vh] max-w-4xl gap-6" @close-auto-focus="(e) => e.preventDefault()">
       <UiAlertDialogTitle>
         <span class="text-2xl">
           <strong class="font-bold">{{ world.name }}</strong>

components/calendar/dialog/Delete.vue

@@ -66,6 +66,7 @@ function handleClosing() {
       @focus-outside="handleClosing"
       @interact-outside="handleClosing"
       @pointer-down-outside="handleClosing"
+      @close-auto-focus="(e) => e.preventDefault()"
     >
       <UiAlertDialogTitle>
         {{ $t('entity.calendar.deleteDialog.title') }}

components/world/dialog/Create.vue

@@ -20,7 +20,7 @@ function handleClose() {
 
 <template>
   <UiAlertDialog :open="modalState">
-    <UiAlertDialogContent class="gap-4">
+    <UiAlertDialogContent class="gap-4" @close-auto-focus="(e) => e.preventDefault()">
       <header>
         <UiAlertDialogTitle>
           <span class="text-2xl">

components/world/dialog/Delete.vue

@@ -66,6 +66,7 @@ function handleClosing() {
       @focus-outside="handleClosing"
       @interact-outside="handleClosing"
       @pointer-down-outside="handleClosing"
+      @close-auto-focus="(e) => e.preventDefault()"
     >
       <UiAlertDialogTitle>
         {{ $t('entity.world.deleteDialog.title') }}

components/world/dialog/Edit.vue

@@ -25,7 +25,7 @@ function handleClose() {
 
 <template>
   <UiAlertDialog :open="modalState">
-    <UiAlertDialogContent class="gap-4">
+    <UiAlertDialogContent class="gap-4" @close-auto-focus="(e) => e.preventDefault()">
       <header>
         <UiAlertDialogTitle>
           <span class="text-2xl">

pages/my/worlds/[id].vue

@@ -232,7 +232,7 @@ function hideEditModal() {
 
       <WorldDialogEdit :world="world.data" :modal-state="isEditWorldModalOpen" @on-close="hideEditModal" />
       <CalendarDialogCreate :world="world.data" :modal-state="isCreateCalendarModalOpen" @on-close="hideCreateDialog" />
-      <CalendarDialogDelete :calendar="markedCalendar" :modal-state="isDeleteCalendarModalOpen" @on-close="hideDeleteCalendarModal" />
+      <CalendarDialogDelete :calendar="markedCalendar" :modal-state="isDeleteCalendarModalOpen" @on-close="hideDeleteCalendarModal"/>
     </template>
     <template v-else>
       <div class="h-full w-full grid place-items-center">