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