From 0c48350271325b529fdbd1c020cfa23dea4b793a Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sat, 8 Jun 2024 16:45:36 +0200
Subject: [PATCH] Disabled close interactions on create event popover

---
 components/calendar/form/CreateEvent.vue | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/components/calendar/form/CreateEvent.vue b/components/calendar/form/CreateEvent.vue
index f2ccd2d..32e5284 100644
--- a/components/calendar/form/CreateEvent.vue
+++ b/components/calendar/form/CreateEvent.vue
@@ -49,6 +49,17 @@ async function handleSubmit() {
     isLoading.value = false
   }
 }
+
+/**
+ *
+ * @param e The closing event (can be keydown or click)
+ */
+function handleClosing(e: Event) {
+  console.log(e)
+  if (isLoading.value) {
+    e.preventDefault()
+  }
+}
 </script>
 
 <template>
@@ -60,7 +71,13 @@ async function handleSubmit() {
       :align="'center'"
       :side="'right'"
       :collision-padding="60"
+      :disable-outside-pointer-events="true"
+      :trap-focus="true"
       class="pl-3 min-w-96 bg-slate-900 border-slate-800"
+      @escape-key-down="handleClosing"
+      @focus-outside="handleClosing"
+      @interact-outside="handleClosing"
+      @pointer-down-outside="handleClosing"
     >
       <form @submit.prevent="handleSubmit">
         <div class="grid grid-cols-2 gap-y-4">