Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit cffd7c4

Browse filesBrowse files
woothuwoothu
committed
fix: CDropdown: close dropdown on every dropdown-item-click event coreui#72 
1 parent 73d2b3f commit cffd7c4
Copy full SHA for cffd7c4

File tree

5 files changed

+34
-34
lines changed
Filter options

5 files changed

+34
-34
lines changed

‎src/components/dropdown/CDropdown.vue

Copy file name to clipboardExpand all lines: src/components/dropdown/CDropdown.vue
+3-3Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -101,11 +101,11 @@ export default {
101101
val ? this.createPopper() : this.removePopper()
102102
this.$emit('update:show', val)
103103
}
104-
},
105-
$route () {
106-
this.visible = false
107104
}
108105
},
106+
mounted () {
107+
this.$on('dropdown-item-click', this.hide)
108+
},
109109
methods: {
110110
checkClick (e) {
111111
if (

‎src/components/dropdown/CDropdownItem.vue

Copy file name to clipboardExpand all lines: src/components/dropdown/CDropdownItem.vue
+7-8Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,19 @@
11
<script>
2-
import { mergeData } from 'vue-functional-data-merge'
32
import CLink, { propsFactory } from '../link/CLink'
43
54
export default {
6-
functional: true,
75
name: 'CDropdownItem',
86
props: propsFactory(),
9-
render (h, { props, data, children }) {
7+
render (h) {
108
return h(
119
CLink,
12-
mergeData(data, {
13-
props,
10+
{
11+
props: this._props,
1412
staticClass: 'dropdown-item',
15-
attrs: { role: 'menuitem' }
16-
}),
17-
children
13+
attrs: { role: 'menuitem' },
14+
on: { click: () => this.$parent.$emit('dropdown-item-click') }
15+
},
16+
this.$slots.default
1817
)
1918
}
2019
}

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

Copy file name to clipboardExpand all lines: src/components/dropdown/tests/CDropdown.spec.js
+10-18Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,6 @@
11
import { mount, createLocalVue } from '@vue/test-utils'
22
import Component from '../CDropdown'
3-
import VueRouter from 'vue-router'
4-
5-
const localVue = new createLocalVue()
6-
localVue.use(VueRouter)
7-
const router = new VueRouter()
8-
9-
const wrapper = mount(Component, {
10-
router,
11-
localVue
12-
})
13-
3+
import CDropdownItem from '../CDropdownItem'
144
const ComponentName = 'CDropdown'
155

166
const generateWrapper = () => mount(Component, {
@@ -30,7 +20,7 @@ const generateWrapper = () => mount(Component, {
3020
flip: false,
3121
},
3222
slots: {
33-
default: 'CDropdown subcomponents'
23+
default: [CDropdownItem, CDropdownItem]
3424
}
3525
})
3626

@@ -55,8 +45,8 @@ describe(ComponentName, () => {
5545
it('has a name', () => {
5646
expect(Component.name).toMatch(ComponentName)
5747
})
58-
it('renders correctly', () => {
59-
expect(wrapper.element).toMatchSnapshot()
48+
it('renders basic wrapper correctly', () => {
49+
expect(mount(Component).element).toMatchSnapshot()
6050
})
6151
it('renders custom wrapper correctly', () => {
6252
expect(generateWrapper().element).toMatchSnapshot()
@@ -65,13 +55,15 @@ describe(ComponentName, () => {
6555
expect(generateNavWrapper().element).toMatchSnapshot()
6656
})
6757
it('toggles when show prop is changed', () => {
68-
expect(wrapper.vm.visible).toBe(false)
69-
wrapper.setProps({ show: true })
58+
const wrapper = generateWrapper()
7059
expect(wrapper.vm.visible).toBe(true)
60+
wrapper.setProps({ show: false })
61+
expect(wrapper.vm.visible).toBe(false)
7162
})
72-
it('toggles when show prop is changed', () => {
63+
it('hide when dropdown item is clicked', () => {
64+
const wrapper = generateWrapper()
7365
expect(wrapper.vm.visible).toBe(true)
74-
wrapper.vm.$router.push('new-route-name')
66+
wrapper.vm.$children[0].$el.click()
7567
expect(wrapper.vm.visible).toBe(false)
7668
})
7769
it('close, but does not open on click when dropdown is disabled', () => {

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

Copy file name to clipboardExpand all lines: src/components/dropdown/tests/__snapshots__/CDropdown.spec.js.snap
+13-2Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`CDropdown renders correctly 1`] = `
3+
exports[`CDropdown renders basic wrapper correctly 1`] = `
44
<div
55
class="dropdown"
66
>
@@ -59,7 +59,18 @@ exports[`CDropdown renders custom wrapper correctly 1`] = `
5959
<div
6060
class="additional-menu-class dropdown-menu show"
6161
>
62-
CDropdown subcomponents
62+
<a
63+
class="dropdown-item"
64+
href="#"
65+
role="menuitem"
66+
target="_self"
67+
/>
68+
<a
69+
class="dropdown-item"
70+
href="#"
71+
role="menuitem"
72+
target="_self"
73+
/>
6374
</div>
6475
</div>
6576
`;

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

Copy file name to clipboardExpand all lines: src/components/dropdown/tests/__snapshots__/CDropdownItem.spec.js.snap
+1-3Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,6 @@ exports[`CDropdownItem renders correctly 2`] = `
1616
role="menuitem"
1717
target="_self"
1818
>
19-
<template>
20-
CDropdownItem content
21-
</template>
19+
CDropdownItem content
2220
</a>
2321
`;

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.