fix(link): support handling multiple click event listeners (fixes #2938) (#2943)

tmorehouse · jacobmllr95 · commit 97e8ecee5f03 · 2019-03-29T10:33:13.000+01:00
* Update link.js

* Update link.html

* Update link.js

* Update link.js

* Update link.spec.js
diff --git a/src/components/link/fixtures/link.html b/src/components/link/fixtures/link.html
@@ -22,6 +22,7 @@
             disabled>Link</b-link>
 
     <b-btn ref="href"
+            @click="handleBtnHrefClick"
            :href="href">Link</b-btn>
 
     <b-btn ref="to_string"
diff --git a/src/components/link/fixtures/link.js b/src/components/link/fixtures/link.js
@@ -1,12 +1,14 @@
 const clickSpy = jest.fn()
 const disabledClickSpy = jest.fn()
+const btnHrefClick = jest.fn()
 
 window.app = new Vue({
   el: '#app',
   data: {
     href: 'https://bootstrap-vue.github.io/',
     clickSpy,
     disabledClickSpy,
+    btnHrefClick,
     testData: {}
   },
   methods: {
@@ -16,6 +18,9 @@ window.app = new Vue({
     handleDisabledClick(e) {
       this.testData.disabled_event = e
       disabledClickSpy.apply(this, arguments)
+    },
+    handleBtnHrefClick(e) {
+      btnHrefClick.apply(this, arguments)
     }
   }
 })
diff --git a/src/components/link/link.js b/src/components/link/link.js
@@ -114,16 +114,20 @@ function clickHandlerFactory({ disabled, tag, href, suppliedHandler, parent }) {
       // Stop event from bubbling up.
       evt.stopPropagation()
       // Kill the event loop attached to this specific EventTarget.
+      // Needed to prevent vue-router for doing its thing
       evt.stopImmediatePropagation()
     } else {
       if (isRouterLink(tag) && evt.target.__vue__) {
         // Router links do not emit instance 'click' events, so we
         // add in an $emit('click', evt) on it's vue instance
         evt.target.__vue__.$emit('click', evt)
       }
-      if (typeof suppliedHandler === 'function') {
-        suppliedHandler(...arguments)
-      }
+      // Call the suppliedHanlder(s), if any provided
+      concat(suppliedHandler)
+        .filter(h => typeof h === 'function')
+        .forEach(handler => {
+          handler(...arguments)
+        })
       parent.$root.$emit('clicked::link', evt)
     }
 
diff --git a/src/components/link/link.spec.js b/src/components/link/link.spec.js
@@ -90,6 +90,13 @@ describe('link', () => {
     expect(firstCallArguments[0]).toBeInstanceOf(Event)
   })
 
+  it('btn with href should invoke click handler when clicked on', async () => {
+    // https://github.com/bootstrap-vue/bootstrap-vue/issues/2938
+    const { app } = window
+    app.$refs.href.click()
+    expect(app.btnHrefClick).toHaveBeenCalled()
+  })
+
   it("should emit 'clicked::link' on $root when clicked on", async () => {
     const { app } = window
     const spy = jest.fn()
