From 71866b0e4b181729c004d6f157beb7288fbd6982 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sat, 1 Mar 2025 14:37:47 +0100
Subject: [PATCH] Fixed focus issues on modals closing

---
 components/calendar/dialog/Create.vue | 2 +-
 components/calendar/dialog/Delete.vue | 1 +
 components/world/dialog/Create.vue    | 2 +-
 components/world/dialog/Delete.vue    | 1 +
 components/world/dialog/Edit.vue      | 2 +-
 pages/my/worlds/[id].vue              | 2 +-
 6 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/components/calendar/dialog/Create.vue b/components/calendar/dialog/Create.vue
index c6285cd..96d8dba 100644
--- a/components/calendar/dialog/Create.vue
+++ b/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>
diff --git a/components/calendar/dialog/Delete.vue b/components/calendar/dialog/Delete.vue
index d5b3ae6..cdad74e 100644
--- a/components/calendar/dialog/Delete.vue
+++ b/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') }}
diff --git a/components/world/dialog/Create.vue b/components/world/dialog/Create.vue
index 25eb825..1abe2cc 100644
--- a/components/world/dialog/Create.vue
+++ b/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">
diff --git a/components/world/dialog/Delete.vue b/components/world/dialog/Delete.vue
index a243a0f..e15f5e8 100644
--- a/components/world/dialog/Delete.vue
+++ b/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') }}
diff --git a/components/world/dialog/Edit.vue b/components/world/dialog/Edit.vue
index 1487278..661aec6 100644
--- a/components/world/dialog/Edit.vue
+++ b/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">
diff --git a/pages/my/worlds/[id].vue b/pages/my/worlds/[id].vue
index 22f54a8..05f655a 100644
--- a/pages/my/worlds/[id].vue
+++ b/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">