Avoid multiple event listeners and fix IE minimizing bug (#299) (@Vic…

…torCazanave)

* Use named toggle events to avoid multiple listeners

* Prevent IE bug when body is active element

src/Modal.vue

@@ -65,8 +65,8 @@ export default {
       default: false
     },
     overlayTransition: {
-        type: String,
-        default: 'overlay-fade'
+      type: String,
+      default: 'overlay-fade'
     },
     transition: {
       type: String
@@ -199,14 +199,12 @@ export default {
    * Sets global listeners
    */
   beforeMount () {
-    Modal.event.$on('toggle', (name, state, params) => {
-      if (name === this.name) {
-        if (typeof state === 'undefined') {
-          state = !this.visible
-        }
-
-        this.toggle(state, params)
+    Modal.event.$on(`toggle-${this.name}`, (state, params) => {
+      if (typeof state === 'undefined') {
+        state = !this.visible
       }
+
+      this.toggle(state, params)
     })
 
     window.addEventListener('resize', this.onWindowResize)
@@ -258,9 +256,10 @@ export default {
     }
   },
   /**
-   * Removes "resize" window listener
+   * Removes global listeners
    */
   beforeDestroy () {
+    Modal.event.$off(`toggle-${this.name}`)
     window.removeEventListener('resize', this.onWindowResize)
 
     if (this.clickToClose) {
@@ -446,7 +445,9 @@ export default {
          * Need to unfocus previously focused element, otherwise
          * all keypress events (ESC press, for example) will trigger on that element.
          */
-        if (document.activeElement && typeof document.activeElement.blur === 'function') {
+        if (document.activeElement &&
+          document.activeElement.tagName.toLowerCase() !== 'body' &&
+          typeof document.activeElement.blur === 'function') {
           document.activeElement.blur()
         }
 

src/index.js

@@ -23,7 +23,7 @@ const Plugin = {
     Vue.prototype.$modal = {
       show (modal, paramsOrProps, params, events = {}) {
         if (typeof modal === 'string') {
-          Plugin.event.$emit('toggle', modal, true, paramsOrProps)
+          Plugin.event.$emit(`toggle-${modal}`, true, paramsOrProps)
         } else {
           let root = Plugin.rootInstance
           if (params && params.root) {
@@ -39,11 +39,11 @@ const Plugin = {
         }
       },
       hide (name, params) {
-        Plugin.event.$emit('toggle', name, false, params)
+        Plugin.event.$emit(`toggle-${name}`, false, params)
       },
 
       toggle (name, params) {
-        Plugin.event.$emit('toggle', name, undefined, params)
+        Plugin.event.$emit(`toggle-${name}`, undefined, params)
       }
     }
     /**