Always teleport the Dialog component to the body tag

bluerobotics · Sep 19, 2023 · f423d0e · f423d0e
1 parent 0cb56f4
commit f423d0e
Showing 1 changed file with 7 additions and 5 deletions.
diff --git a/src/components/Dialog.vue b/src/components/Dialog.vue
@@ -1,9 +1,11 @@
 <template>
-  <dialog ref="dialogRef" class="modal">
-    <div ref="dialogContentRef" class="flex flex-col items-center justify-center w-full h-full p-5 backdrop-blur-sm">
-      <slot></slot>
-    </div>
-  </dialog>
+  <teleport to="body">
+    <dialog ref="dialogRef" class="modal">
+      <div ref="dialogContentRef" class="flex flex-col items-center justify-center w-full h-full p-5 backdrop-blur-sm">
+        <slot></slot>
+      </div>
+    </dialog>
+  </teleport>
 </template>
 
 <script setup lang="ts">