bootstrap-vue · jacobmllr95 · Apr 13, 2019 · Apr 11, 2019 · Apr 11, 2019 · Apr 11, 2019
diff --git a/src/components/dropdown/dropdown-item.js b/src/components/dropdown/dropdown-item.js
@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import BLink, { propsFactory as linkPropsFactory } from '../link/link'
+import { requestAF } from '../../utils/dom'
 
 export const props = linkPropsFactory()
 
@@ -14,9 +15,12 @@ export default Vue.extend({
   props,
   methods: {
     closeDropdown() {
-      if (this.bvDropdown) {
-        this.bvDropdown.hide(true)
-      }
+      // Close on next animation frame to allow <b-link> time to process
+      requestAF(() => {
+        if (this.bvDropdown) {
+          this.bvDropdown.hide(true)
+        }
+      })
     },
     onClick(evt) {
       this.$emit('click', evt)

diff --git a/src/components/dropdown/dropdown-item.spec.js b/src/components/dropdown/dropdown-item.spec.js
@@ -1,5 +1,9 @@
 import BDropdownItem from './dropdown-item'
-import { mount } from '@vue/test-utils'
+import VueRouter from 'vue-router'
+import { mount, createLocalVue as CreateLocalVue } from '@vue/test-utils'
+
+const waitNT = ctx => new Promise(resolve => ctx.$nextTick(resolve))
+const waitRAF = () => new Promise(resolve => requestAnimationFrame(resolve))
 
 describe('dropdown-item', () => {
   it('renders with tag "a" and href="#" by default', async () => {
@@ -42,7 +46,8 @@ describe('dropdown-item', () => {
     const item = wrapper.find('a')
     expect(item).toBeDefined()
     item.trigger('click')
-    await wrapper.vm.$nextTick()
+    await waitNT(wrapper.vm)
+    await waitRAF()
     expect(called).toBe(true)
     expect(refocus).toBe(true)
 
@@ -68,10 +73,63 @@ describe('dropdown-item', () => {
     const item = wrapper.find('a')
     expect(item).toBeDefined()
     item.trigger('click')
-    await wrapper.vm.$nextTick()
+    await waitNT(wrapper.vm)
+    await waitRAF()
     expect(called).toBe(false)
     expect(refocus).toBe(null)
 
     wrapper.destroy()
   })
+
+  describe('router-link support', () => {
+    it('works', async () => {
+      const localVue = new CreateLocalVue()
+      localVue.use(VueRouter)
+
+      const router = new VueRouter({
+        mode: 'abstract',
+        routes: [
+          { path: '/', component: { name: 'R', template: '<div class="r">ROOT</div>' } },
+          { path: '/a', component: { name: 'A', template: '<div class="a">A</div>' } },
+          { path: '/b', component: { name: 'B', template: '<div class="a">B</div>' } }
+        ]
+      })
+
+      const App = localVue.extend({
+        router,
+        render(h) {
+          return h('ul', {}, [
+            h(BDropdownItem, { props: { to: '/a' } }, ['to-a']),
+            h(BDropdownItem, { props: { href: '/a' } }, ['href-a']),
+            h(BDropdownItem, { props: { to: { path: '/b' } } }, ['to-path-b']),
+            h(BDropdownItem, { props: { href: '/b' } }, ['href-a']),
+            h('router-view')
+          ])
+        }
+      })
+
+      const wrapper = mount(App, {
+        localVue: localVue,
+        attachToDocument: true
+      })
+
+      expect(wrapper.isVueInstance()).toBe(true)
+      expect(wrapper.is('ul')).toBe(true)
+
+      expect(wrapper.findAll('li').length).toBe(4)
+      expect(wrapper.findAll('a').length).toBe(4)
+
+      const $links = wrapper.findAll('a')
+
+      expect($links.at(0).isVueInstance()).toBe(true)
+      expect($links.at(1).isVueInstance()).toBe(false)
+      expect($links.at(2).isVueInstance()).toBe(true)
+      expect($links.at(3).isVueInstance()).toBe(false)
+
+      expect($links.at(0).vm.$options.name).toBe('RouterLink')
+      expect($links.at(2).vm.$options.name).toBe('RouterLink')
+
+      wrapper.destroy()
+    })
+  })
 })