fix: CDropdown: close dropdown on every dropdown-item-click event #71

Author: woothu

src/components/dropdown/CDropdown.vue

@@ -101,11 +101,11 @@ export default {
         val ? this.createPopper() : this.removePopper()
         this.$emit('update:show', val)
       }
-    },
-    $route () {
-      this.visible = false
     }
   },
+  mounted () {
+    this.$on('dropdown-item-click', this.hide)
+  },
   methods: {
     checkClick (e) {
       if (

src/components/dropdown/CDropdownItem.vue

@@ -1,20 +1,19 @@
 <script>
-import { mergeData } from 'vue-functional-data-merge'
 import CLink, { propsFactory } from '../link/CLink'
 
 export default {
-  functional: true,
   name: 'CDropdownItem',
   props: propsFactory(),
-  render (h, { props, data, children }) {
+  render (h) {
     return h(
       CLink,
-      mergeData(data, {
-        props,
+      {
+        props: this._props,
         staticClass: 'dropdown-item',
-        attrs: { role: 'menuitem' }
-      }),
-      children
+        attrs: { role: 'menuitem' },
+        on: { click: () => this.$parent.$emit('dropdown-item-click') }
+      },
+      this.$slots.default
     )
   }
 }

src/components/dropdown/tests/CDropdown.spec.js

@@ -1,16 +1,6 @@
 import { mount, createLocalVue } from '@vue/test-utils'
 import Component from '../CDropdown'
-import VueRouter from 'vue-router'
-
-const localVue = new createLocalVue()
-localVue.use(VueRouter)
-const router = new VueRouter()
-
-const wrapper = mount(Component, {
-  router,
-  localVue
-})
-
+import CDropdownItem from '../CDropdownItem'
 const ComponentName = 'CDropdown'
 
 const generateWrapper = () => mount(Component, {
@@ -30,7 +20,7 @@ const generateWrapper = () => mount(Component, {
     flip: false,
   },
   slots: {
-    default: 'CDropdown subcomponents'
+    default: [CDropdownItem, CDropdownItem]
   }
 })
 
@@ -55,8 +45,8 @@ describe(ComponentName, () => {
   it('has a name', () => {
     expect(Component.name).toMatch(ComponentName)
   })
-  it('renders correctly', () => {
-    expect(wrapper.element).toMatchSnapshot()
+  it('renders basic wrapper correctly', () => {
+    expect(mount(Component).element).toMatchSnapshot()
   })
   it('renders custom wrapper correctly', () => {
     expect(generateWrapper().element).toMatchSnapshot()
@@ -65,13 +55,15 @@ describe(ComponentName, () => {
     expect(generateNavWrapper().element).toMatchSnapshot()
   })
   it('toggles when show prop is changed', () => {
-    expect(wrapper.vm.visible).toBe(false)
-    wrapper.setProps({ show: true })
+    const wrapper = generateWrapper()
     expect(wrapper.vm.visible).toBe(true)
+    wrapper.setProps({ show: false })
+    expect(wrapper.vm.visible).toBe(false)
   })
-  it('toggles when show prop is changed', () => {
+  it('hide when dropdown item is clicked', () => {
+    const wrapper = generateWrapper()
     expect(wrapper.vm.visible).toBe(true)
-    wrapper.vm.$router.push('new-route-name')
+    wrapper.vm.$children[0].$el.click()
     expect(wrapper.vm.visible).toBe(false)
   })
   it('close, but does not open on click when dropdown is disabled', () => {

src/components/dropdown/tests/__snapshots__/CDropdown.spec.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CDropdown renders correctly 1`] = `
+exports[`CDropdown renders basic wrapper correctly 1`] = `
 <div
   class="dropdown"
 >
@@ -59,7 +59,18 @@ exports[`CDropdown renders custom wrapper correctly 1`] = `
   <div
     class="additional-menu-class dropdown-menu show"
   >
-    CDropdown subcomponents
+    <a
+      class="dropdown-item"
+      href="#"
+      role="menuitem"
+      target="_self"
+    />
+    <a
+      class="dropdown-item"
+      href="#"
+      role="menuitem"
+      target="_self"
+    />
   </div>
 </div>
 `;

src/components/dropdown/tests/__snapshots__/CDropdownItem.spec.js.snap

@@ -16,8 +16,6 @@ exports[`CDropdownItem renders correctly 2`] = `
   role="menuitem"
   target="_self"
 >
-  <template>
-    CDropdownItem content
-  </template>
+  CDropdownItem content
 </a>
 `;