fix(modal): use safeId() when comparing id received by hide/show handler (closes bootstrap-vue#3389 (bootstrap-vue#3394)

tmorehouse · web-flow · commit fae3d25092d9 · 2019-05-27T12:35:24.000-03:00
diff --git a/src/components/modal/modal.js b/src/components/modal/modal.js
@@ -361,12 +361,28 @@ export default Vue.extend({
     }
   },
   methods: {
+    // Private method to update the v-model
     updateModel(val) {
       if (val !== this.visible) {
         this.$emit('change', val)
       }
     },
-    // Public Methods
+    // Private method to create a BvModalEvent object
+    buildEvent(type, opts = {}) {
+      return new BvModalEvent(type, {
+        // Default options
+        cancelable: false,
+        target: this.$refs.modal || this.$el || null,
+        relatedTarget: null,
+        trigger: null,
+        // Supplied options
+        ...opts,
+        // Options that can't be overridden
+        vueTarget: this,
+        componentId: this.safeId()
+      })
+    },
+    // Public method to show modal
     show() {
       if (this.isVisible || this.isOpening) {
         // If already open, on in the process of opening, do nothing
@@ -383,12 +399,8 @@ export default Vue.extend({
       this.isOpening = true
       // Set the element to return focus to when closed
       this.return_focus = this.return_focus || this.getActiveElement()
-      const showEvt = new BvModalEvent('show', {
-        cancelable: true,
-        vueTarget: this,
-        target: this.$refs.modal,
-        relatedTarget: null,
-        componentId: this.safeId()
+      const showEvt = this.buildEvent('show', {
+        cancelable: true
       })
       this.emitEvent(showEvt)
       // Don't show if canceled
@@ -401,18 +413,15 @@ export default Vue.extend({
       // Show the modal
       this.doShow()
     },
+    // Public method to hide modal
     hide(trigger = '') {
       if (!this.isVisible || this.isClosing) {
         /* istanbul ignore next */
         return
       }
       this.isClosing = true
-      const hideEvt = new BvModalEvent('hide', {
+      const hideEvt = this.buildEvent('hide', {
         cancelable: trigger !== 'FORCE',
-        vueTarget: this,
-        target: this.$refs.modal,
-        relatedTarget: null,
-        componentId: this.safeId(),
         trigger: trigger || null
       })
       // We emit specific event for one of the three built-in buttons
@@ -513,14 +522,7 @@ export default Vue.extend({
       this.isShow = true
       this.isTransitioning = false
       this.$nextTick(() => {
-        const shownEvt = new BvModalEvent('shown', {
-          cancelable: false,
-          vueTarget: this,
-          target: this.$refs.modal,
-          relatedTarget: null,
-          componentId: this.safeId()
-        })
-        this.emitEvent(shownEvt)
+        this.emitEvent(this.buildEvent('shown'))
         this.focusFirst()
         this.setEnforceFocus(true)
       })
@@ -546,14 +548,7 @@ export default Vue.extend({
         modalManager.unregisterModal(this)
         // TODO: Need to find a way to pass the `trigger` property
         //       to the `hidden` event, not just only the `hide` event
-        const hiddenEvt = new BvModalEvent('hidden', {
-          cancelable: false,
-          vueTarget: this,
-          target: this.$el,
-          relatedTarget: null,
-          componentId: this.safeId()
-        })
-        this.emitEvent(hiddenEvt)
+        this.emitEvent(this.buildEvent('hidden'))
       })
     },
     // Event emitter
@@ -639,18 +634,18 @@ export default Vue.extend({
     },
     // Root listener handlers
     showHandler(id, triggerEl) {
-      if (id === this.id) {
+      if (id === this.safeId()) {
         this.return_focus = triggerEl || this.getActiveElement()
         this.show()
       }
     },
     hideHandler(id) {
-      if (id === this.id) {
+      if (id === this.safeId()) {
         this.hide('event')
       }
     },
     toggleHandler(id, triggerEl) {
-      if (id === this.id) {
+      if (id === this.safeId()) {
         this.toggle(triggerEl)
       }
     },
@@ -662,8 +657,6 @@ export default Vue.extend({
     },
     // Focus control handlers
     focusFirst() {
-      // TODO: Add support for finding input element with 'autofocus'
-      //       attribute set and focus that element
       // Don't try and focus if we are SSR
       if (isBrowser) {
         const modal = this.$refs.modal
