fix: remove mouseup capabilities to trigger modal close.

__tests__/unit/components/Modal/ModalWindow.spec.js

@@ -71,17 +71,40 @@ describe('ModalWindow', () => {
       expect(wrapper.emitted('close')).toBeTruthy()
     })
 
-    it('should emit a close event when clicks the mask', () => {
+    it('should not close when clicking inside the modal', () => {
+      const wrapper = mount(ModalWindow, { stubs })
+      const modal = wrapper.find('.ModalWindow__container')
+      modal.trigger('click')
+      expect(wrapper.emitted('close')).toBeFalsy()
+    })
+
+    it('should not close when mousedown inside the modal', () => {
+      const wrapper = mount(ModalWindow, { stubs })
+      const modal = wrapper.find('.ModalWindow__container')
+      modal.trigger('mousedown')
+      expect(wrapper.emitted('close')).toBeFalsy()
+    })
+
+    it('should close when firing mousedown inside the mask', () => {
       const wrapper = mount(ModalWindow, { stubs })
       const mask = wrapper.find('.ModalWindow')
-      mask.trigger('click')
+      mask.trigger('mousedown')
       expect(wrapper.emitted('close')).toBeTruthy()
     })
 
-    it('should not close when pressing inside the modal', () => {
+    it('should not close event when firing mouseup only inside the mask', () => {
+      const wrapper = mount(ModalWindow, { stubs })
+      const mask = wrapper.find('.ModalWindow')
+      mask.trigger('mouseup')
+      expect(wrapper.emitted('close')).toBeFalsy()
+    })
+
+    it('should not close event when firing mousedown inside the container and mouseup inside the wrapper', () => {
       const wrapper = mount(ModalWindow, { stubs })
       const modal = wrapper.find('.ModalWindow__container')
-      modal.trigger('click')
+      const mask = wrapper.find('.ModalWindow')
+      modal.trigger('mousedown')
+      mask.trigger('mouseup')
       expect(wrapper.emitted('close')).toBeFalsy()
     })
   })

src/renderer/components/Modal/ModalWindow.vue

@@ -1,15 +1,13 @@
 <template>
-  <Portal
-    :to="portalTarget"
-  >
+  <Portal :to="portalTarget">
     <div
       slot-scope="{ setPortalHasContent }"
       class="ModalWindow"
       :class="{
         'ModalWindow--maximized': isMaximized,
         'ModalWindow--minimized': !isMaximized
       }"
-      @click="onBackdropClick"
+      @mousedown.left="onBackdropClick"
     >
       <Transition name="ModalWindow">
         <div class="ModalWindow__wrapper flex items-center justify-center absolute">
@@ -19,7 +17,7 @@
               [containerClassesMinimized]: !isMaximized,
             }]"
             class="ModalWindow__container flex flex-col mx-auto rounded-lg relative transition text-theme-text-content"
-            @click.stop="void 0"
+            @mousedown.stop="void 0"
           >
             <section class="ModalWindow__container__content">
               <div class="ModalWindow__container__actions">
@@ -193,30 +191,30 @@ export default {
   display: table;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, .5);
-  transition: opacity .3s ease;
+  background-color: rgba(0, 0, 0, 0.5);
+  transition: opacity 0.3s ease;
 }
 
 .ModalWindow--maximized .ModalWindow__wrapper {
-  @apply pin
+  @apply pin;
 }
 .ModalWindow--minimized .ModalWindow__wrapper {
-  @apply pin-r pin-b mr-5 mb-5
+  @apply pin-r pin-b mr-5 mb-5;
 }
 
 .ModalWindow__container__actions {
-  @apply absolute pin-x pin-t flex justify-end m-2 p-2
+  @apply absolute pin-x pin-t flex justify-end m-2 p-2;
 }
 
 .ModalWindow--maximized .ModalWindow__container__content {
-  @apply overflow-y-auto p-16 pt-16 bg-theme-modal shadow rounded-lg
+  @apply overflow-y-auto p-16 pt-16 bg-theme-modal shadow rounded-lg;
 }
 .ModalWindow--minimized .ModalWindow__container__content {
-  @apply overflow-y-auto px-8 pt-2 pb-5 bg-theme-modal shadow rounded-lg
+  @apply overflow-y-auto px-8 pt-2 pb-5 bg-theme-modal shadow rounded-lg;
 }
 .ModalWindow--minimized .ModalWindow__container {
-  height: 200px!default;
-  @apply .overflow-hidden;
+  height: 200px !default;
+  @apply overflow-hidden;
 }
 </style>
 
@@ -231,6 +229,6 @@ export default {
   @apply ModalWindow__container__footer bg-theme-error text-white;
 }
 .ModalWindow--minimized .ModalWindow__container__footer {
-  @apply hidden
+  @apply hidden;
 }
 </style>