Model Backdrop was "click", now "mousedown" (#304)

* Model Backdrop was "click", now "mousedown"

As mentioned in #285 when someone starts a click event inside the modal content area, and then releases it outside, in the backdrop, the modal hides. This is a frustrating issue when selecting text in the modal, as I often do. This only happens in chrome and is also an issue in bootstrap jquery itself. 

This is the simplest possible fix - replacing @click.self with @mousedown.self. This avoids the weird chrome behaviour.

* Changed MessageBox to use mousedown

'should be able to set alert backdrop to true' was sending click event, which unfortunately excludes mousedown. Changed it to send the full event sequence (mousedown,mouseup, click) for maximum generality.

* Modal.spec.js - Mousedown changes.

Changed backdrop click tests to send the full event sequence (mousedown, mouseup, click) rather than just click.

src/components/modal/Modal.vue

@@ -1,5 +1,5 @@
 <template>
-  <div tabindex="-1" role="dialog" class="modal" :class="{fade:transitionDuration>0}" @click.self="backdropClicked">
+  <div tabindex="-1" role="dialog" class="modal" :class="{fade:transitionDuration>0}" @mousedown.self="backdropClicked">
     <div ref="dialog" class="modal-dialog" :class="modalSizeClass" role="document">
       <div class="modal-content">
         <div class="modal-header" v-if="header">

test/specs/MessageBox.spec.js

@@ -279,6 +279,8 @@ describe('MessageBox', () => {
     await utils.sleep(utils.transitionDuration)
     expect(document.querySelector('.modal-backdrop')).to.exist
     expect(document.querySelector('.modal').className).to.contain('in')
+    utils.triggerEvent(document.querySelector('.modal'), 'mousedown')
+    utils.triggerEvent(document.querySelector('.modal'), 'mouseup')
     utils.triggerEvent(document.querySelector('.modal'), 'click')
     await utils.sleep(utils.transitionDuration)
     expect(document.querySelector('.modal-backdrop')).not.exist

test/specs/Modal.spec.js

@@ -379,6 +379,8 @@ describe('Modal', () => {
     await utils.sleep(utils.transitionDuration)
     expect(document.querySelector('.modal-backdrop')).to.exist
     expect(modal.className).to.contain('in')
+    utils.triggerEvent(modal, 'mousedown')
+    utils.triggerEvent(modal, 'mouseup')
     utils.triggerEvent(modal, 'click')
     await utils.sleep(utils.transitionDuration)
     expect(document.querySelector('.modal-backdrop')).not.exist
@@ -395,6 +397,8 @@ describe('Modal', () => {
     await utils.sleep(utils.transitionDuration)
     expect(document.querySelector('.modal-backdrop')).to.exist
     expect(modal.className).to.contain('in')
+    utils.triggerEvent(modal, 'mousedown')
+    utils.triggerEvent(modal, 'mouseup')
     utils.triggerEvent(modal, 'click')
     await utils.sleep(utils.transitionDuration)
     expect(document.querySelector('.modal-backdrop')).to.exist