fix(d-dropdown): hide dropdown when link is clicked

Author: nickvasdev

CHANGELOG.md

@@ -5,6 +5,7 @@ All notable changes to this project will be documented in this file.
 ### 1.0.5 - (2018-10-30)
 
 * fix(d-link): exact/active classes not properly applied #10
+* fix(d-dropdown): hide dropdown when link is clicked
 
 ### 1.0.4 - (2018-10-15)
 

src/components/dropdown/Dropdown.vue

@@ -62,7 +62,7 @@
 <script>
 import Popper from 'popper.js'
 import { guid, closest } from '../../utils'
-import { THEMECOLORS, DROPDOWN_EVENTS, KEYCODES } from '../../utils/constants'
+import { THEMECOLORS, DROPDOWN_EVENTS, KEYCODES, LINK_EVENTS } from '../../utils/constants'
 import { CancelableEvent } from '../../utils/events'
 import { mixin as clickAwayMixin } from 'vue-clickaway';
 import rootListenerMixin from '../../mixins/root-listener.mixin'
@@ -421,6 +421,8 @@ export default {
                 this.visible = false
             }
         })
+
+        this.listenOnRoot(LINK_EVENTS.CLICKED, this.away)
     },
     deactivated() {
         this.visible = false

src/components/link/Link.vue

@@ -11,14 +11,18 @@
             disabled ? 'disabled' : ''
         ]"
         :aria-disabled="computedAriaDisabled"
-        @click="handleClick">
+        @click.native="handleClick">
         <slot>Link</slot>
     </component>
 </template>
 
 <script>
+import { LINK_EVENTS } from '../../utils/constants';
+import rootListenerMixin from '../../mixins/root-listener.mixin'
+
 export default {
     name: 'd-link',
+    mixins: [ rootListenerMixin ],
     props: {
         /**
          * The link href.
@@ -140,6 +144,8 @@ export default {
                 } else {
                     this.$emit('click', event);
                 }
+
+                this.emitOnRoot(LINK_EVENTS.CLICKED, event);
             }
 
             if ((!isRouterLink && this.computedHref === '#') || this.disabled) {

src/utils/constants.js

@@ -44,11 +44,17 @@ export const DROPDOWN_EVENTS = {
     HIDDEN: 'dropdown-hidden'
 }
 
+// Link Events
+export const LINK_EVENTS = {
+    CLICKED: 'link-clicked'
+}
+
 // All events
 export const EVENTS = {
     MODAL: MODAL_EVENTS,
     ALERT: ALERT_EVENTS,
-    DROPDOWN: DROPDOWN_EVENTS
+    DROPDOWN: DROPDOWN_EVENTS,
+    LINK: LINK_EVENTS
 }
 
 /**