refactor: avoid using stop event modifiers #111

vue-final · Jun 12, 2021 · c500513 · c500513
1 parent facad84
commit c500513
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 17 deletions.
diff --git a/dist/VueFinalModal.esm.js b/dist/VueFinalModal.esm.js
diff --git a/dist/VueFinalModal.esm.js.map b/dist/VueFinalModal.esm.js.map
diff --git a/dist/VueFinalModal.umd.js b/dist/VueFinalModal.umd.js
diff --git a/dist/VueFinalModal.umd.js.map b/dist/VueFinalModal.umd.js.map
diff --git a/lib/VueFinalModal.vue b/lib/VueFinalModal.vue
@@ -40,18 +40,18 @@
         role="dialog"
         aria-modal="true"
         tabindex="-1"
-        @mouseup.self.stop="onMouseupContainer"
-        @touchend.self.stop="onMouseupContainer"
-        @mousedown.self.stop="onMousedown"
-        @touchstart.self.stop="onMousedown"
+        @mouseup.self="onMouseupContainer"
+        @touchend.self="onMouseupContainer"
+        @mousedown.self="onMousedown"
+        @touchstart.self="onMousedown"
       >
         <div
           ref="vfmContent"
           class="vfm__content"
           :class="[contentClass, { 'vfm--prevent-auto': preventClick }]"
           :style="bindContentStyle"
-          @mousedown.self.stop="onMousedown"
-          @touchstart.self.stop="onMousedown"
+          @mousedown="onMousedown(null)"
+          @touchstart="onMousedown(null)"
         >
           <slot :params="params" :close="() => $emit('input', false)" />
           <div
@@ -437,11 +437,11 @@ export default {
       this.params = {}
     },
     onMousedown(e) {
-      this.lastMousedownEl = e.target
+      this.lastMousedownEl = e?.target
     },
-    onMouseupContainer(e) {
-      // skip when the mousedown didn't start on the container el
-      if (this.lastMousedownEl !== e.target) return
+    onMouseupContainer() {
+      // skip when the lastMousedownEl didn't equal $refs.vfmContainer
+      if (this.lastMousedownEl !== this.$refs.vfmContainer) return
       // skip when state equal 'resize:move'
       if (this.state === 'resize:move') return
       this.$emit('click-outside', this.createModalEvent({ type: 'click-outside' }))

diff --git a/tests/unit/VueFinalModal.spec.js b/tests/unit/VueFinalModal.spec.js
@@ -23,7 +23,16 @@ describe('VueFinalModal.vue', () => {
     })
     it('clickToClose: true', async () => {
       const { wrapper } = await createOpenedModal()
-      wrapper.find('.vfm__container').trigger('click')
+      wrapper.find('.vfm__container').trigger('mousedown')
+      wrapper.find('.vfm__content').trigger('mouseup')
+      await afterTransition()
+      expect(wrapper.find('.vfm').isVisible()).toBe(true)
+      wrapper.find('.vfm__content').trigger('mousedown')
+      wrapper.find('.vfm__container').trigger('mouseup')
+      await afterTransition()
+      expect(wrapper.find('.vfm').isVisible()).toBe(true)
+      wrapper.find('.vfm__container').trigger('mousedown')
+      wrapper.find('.vfm__container').trigger('mouseup')
       await afterTransition()
       expect(wrapper.find('.vfm').isVisible()).toBe(false)
     })
@@ -129,7 +138,8 @@ describe('VueFinalModal.vue', () => {
       const { wrapper } = await createOpenedModal({
         clickToClose: false
       })
-      wrapper.find('.vfm__container').trigger('click')
+      wrapper.find('.vfm__container').trigger('mousedown')
+      wrapper.find('.vfm__container').trigger('mouseup')
       await afterTransition()
       expect(wrapper.find('.vfm').isVisible()).toBe(true)
     })
@@ -429,7 +439,8 @@ describe('VueFinalModal.vue', () => {
           }
         }
       )
-      wrapper.find('.vfm__container').trigger('click')
+      wrapper.find('.vfm__container').trigger('mousedown')
+      wrapper.find('.vfm__container').trigger('mouseup')
       await afterTransition()
       expect(clickOutside).toHaveBeenCalled()
       expect(beforeOpen).toHaveBeenCalled()