From f184d2531d0a57534d768eea187c45a3a8e7e986 Mon Sep 17 00:00:00 2001
From: hoiheart <hoiheart@gmail.com>
Date: Mon, 9 Aug 2021 19:51:00 +0900
Subject: [PATCH] fix: Change background mouse click event to mousedown,
 mouseup #26

---
 src/Modal.vue |  8 +++++---
 src/hooks.ts  | 17 +++++++++++++----
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/Modal.vue b/src/Modal.vue
index 0ce53f5..b3492d1 100644
--- a/src/Modal.vue
+++ b/src/Modal.vue
@@ -30,7 +30,8 @@
             transitionDuration: transition,
             ...mergeOptions?.styleModalContent
           }"
-          @click.self="onClickDimmed"
+          @mousedown.self="onMouseDownDimmed"
+          @mouseup="onMouseUpDimmed"
         >
           <slot :emitClose="emitClose" />
           <slot name="close" />
@@ -115,7 +116,7 @@ export default defineComponent({
 
     const { latest } = useOrder({ modalRef, show })
     useA11Y({ latest, modalRef, show })
-    const { onClickDimmed } = useClose({
+    const { onMouseDownDimmed, onMouseUpDimmed } = useClose({
       close,
       closeClickDimmed: mergeOptions.closeClickDimmed,
       closeKeyCode: mergeOptions.closeKeyCode,
@@ -153,7 +154,8 @@ export default defineComponent({
       latest,
       mergeOptions,
       modalRef,
-      onClickDimmed,
+      onMouseDownDimmed,
+      onMouseUpDimmed,
       onTransitionEmit,
       show,
       teleportTarget,
diff --git a/src/hooks.ts b/src/hooks.ts
index a8a5c1f..ceb2369 100644
--- a/src/hooks.ts
+++ b/src/hooks.ts
@@ -16,7 +16,8 @@ type UseClose = ({ close, closeKeyCode, latest }: {
   closeKeyCode: number | false;
   latest: ComputedRef<boolean>;
 }) => {
-  onClickDimmed: () => void
+  onMouseDownDimmed: (e: MouseEvent) => void
+  onMouseUpDimmed: (e: MouseEvent) => void
 }
 
 type UseOrder = ({ modalRef, show }: {
@@ -70,10 +71,17 @@ export const useA11Y: UseA11Y = ({ modalRef, latest, show }) => {
 }
 
 export const useClose: UseClose = ({ close, closeClickDimmed, closeKeyCode, latest }) => {
-  function onClickDimmed () {
-    if (closeClickDimmed) {
+  let actionTarget: null|EventTarget = null
+
+  function onMouseDownDimmed (e: MouseEvent) {
+    actionTarget = e.target
+  }
+
+  function onMouseUpDimmed (e: MouseEvent) {
+    if (closeClickDimmed && actionTarget === e.target) {
       close.value()
     }
+    actionTarget = null
   }
 
   function closeKeyEvent (event: KeyboardEvent) {
@@ -95,7 +103,8 @@ export const useClose: UseClose = ({ close, closeClickDimmed, closeKeyCode, late
   })
 
   return {
-    onClickDimmed
+    onMouseDownDimmed,
+    onMouseUpDimmed
   }
 }