From b918ad50cf0c371d46af85c0bb1f595c1aca2f71 Mon Sep 17 00:00:00 2001
From: Jason Etcovitch <jasonetco@github.com>
Date: Mon, 19 Dec 2022 16:34:58 -0500
Subject: [PATCH] fix: image modal unable to select image (#459)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
---
 components/modal/ModalContainer.vue    | 1 -
 components/modal/ModalMediaPreview.vue | 4 ++--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/components/modal/ModalContainer.vue b/components/modal/ModalContainer.vue
index f65fdede..f8e72c28 100644
--- a/components/modal/ModalContainer.vue
+++ b/components/modal/ModalContainer.vue
@@ -42,7 +42,6 @@ useEventListener('keydown', (e: KeyboardEvent) => {
     </ModalDialog>
     <ModalDialog
       v-model="isMediaPreviewOpen"
-      pointer-events-none
       w-full max-w-full h-full max-h-full
       bg-transparent border-0 shadow-none
     >
diff --git a/components/modal/ModalMediaPreview.vue b/components/modal/ModalMediaPreview.vue
index 4053ce2f..ec7be2e3 100644
--- a/components/modal/ModalMediaPreview.vue
+++ b/components/modal/ModalMediaPreview.vue
@@ -22,14 +22,14 @@ function prev() {
 
 function onClick(e: MouseEvent) {
   const path = e.composedPath() as HTMLElement[]
-  const el = path.find(el => ['A', 'BUTTON', 'IMG', 'VIDEO'].includes(el.tagName?.toUpperCase()))
+  const el = path.find(el => ['A', 'BUTTON', 'IMG', 'VIDEO', 'P'].includes(el.tagName?.toUpperCase()))
   if (!el)
     emit('close')
 }
 </script>
 
 <template>
-  <div relative h-full w-full flex select-none pointer-events-none pt-12>
+  <div relative h-full w-full flex pt-12 @click="onClick">
     <button
       v-if="hasNext" pointer-events-auto btn-action-icon bg="black/20" :aria-label="$t('action.previous')"
       hover:bg="black/40" dark:bg="white/30" dark:hover:bg="white/20" absolute top="1/2" right-1