Merge pull request #129 from vue-final/bugfix/do-not-close-modal-when-select-text

fix: #111

Author: hunterliu1003

dist/VueFinalModal.esm.js

@@ -40,13 +40,15 @@
         role="dialog"
         aria-modal="true"
         tabindex="-1"
-        @click.self="onClickContainer"
+        @mouseup.self="onMouseupContainer"
+        @mousedown.self="onMousedown"
       >
         <div
           ref="vfmContent"
           class="vfm__content"
           :class="[contentClass, { 'vfm--prevent-auto': preventClick }]"
           :style="bindContentStyle"
+          @mousedown="onMousedown(null)"
         >
           <slot :params="params" :close="() => $emit('input', false)" />
           <div
@@ -178,7 +180,8 @@ export default {
     dragResizeStyle: {},
     resolveToggle: noop,
     rejectToggle: noop,
-    state: null
+    state: null,
+    lastMousedownEl: null
   }),
   computed: {
     api() {
@@ -430,7 +433,12 @@ export default {
       if (stopEvent) return
       this.params = {}
     },
-    onClickContainer() {
+    onMousedown(e) {
+      this.lastMousedownEl = e?.target
+    },
+    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' }))

dist/VueFinalModal.esm.js.map

@@ -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()