diff --git a/components/calendar/dialog/CreateEvent.vue b/components/calendar/dialog/CreateEvent.vue
index b28d68a..866ce99 100644
--- a/components/calendar/dialog/CreateEvent.vue
+++ b/components/calendar/dialog/CreateEvent.vue
@@ -35,8 +35,7 @@ function openEventCreatePopover() {
  *
  * @param e The closing event (can be keydown or click)
  */
-function handleClosing(e: Event) {
-  e.preventDefault()
+function handleClosing() {
   popoverOpen.value = false
   resetSkeleton()
 }
@@ -54,8 +53,8 @@ function handleClosing(e: Event) {
       :disable-outside-pointer-events="true"
       :trap-focus="true"
       class="pl-3 w-[30rem] max-w-full border-indigo-200 dark:bg-slate-950 dark:border-indigo-950"
-      @escape-key-down="handleClosing"
-      @pointer-down-outside="handleClosing"
+      @escape-key-down.prevent="handleClosing"
+      @pointer-down-outside.prevent="handleClosing"
     >
       <CalendarFormCreateEvent @event-created="handleClosing" />
     </UiPopoverContent>
diff --git a/components/calendar/dialog/QuickCreateEvent.vue b/components/calendar/dialog/QuickCreateEvent.vue
index 53f0446..41a9218 100644
--- a/components/calendar/dialog/QuickCreateEvent.vue
+++ b/components/calendar/dialog/QuickCreateEvent.vue
@@ -11,11 +11,8 @@ function toggleDialog() {
 
 /**
  * Prevents the modal from closing if's still loading
- *
- * @param e The closing event (can be keydown or click)
  */
-function handleClosing(e: Event) {
-  e.preventDefault()
+function handleClosing() {
   setTimeout(() => resetSkeleton(), 100)
 }
 </script>
@@ -32,8 +29,8 @@ function handleClosing(e: Event) {
   <UiDialog v-model:open="isDialogOpen">
     <UiDialogContent
       class="border-indigo-200 dark:bg-slate-950 dark:border-indigo-950"
-      @escape-key-down="handleClosing"
-      @pointer-down-outside="handleClosing"
+      @escape-key-down.prevent="handleClosing"
+      @pointer-down-outside.prevent="handleClosing"
     >
       <UiDialogTitle>
         {{ $t("entity.calendar.event.addSingle") }}