diff --git a/src/components/dropdown/Dropdown.d.ts b/src/components/dropdown/Dropdown.d.ts
index bcf49cf0c..3ec4a5787 100644
--- a/src/components/dropdown/Dropdown.d.ts
+++ b/src/components/dropdown/Dropdown.d.ts
@@ -19,6 +19,8 @@ export declare class Dropdown extends Vue {
     appendTo?: string;
     $emit(eventName: 'input', value: string): this;
     $emit(eventName: 'change', e: { originalEvent: Event, value: string }): this;
+    $emit(eventName: 'show'): this;
+    $emit(eventName: 'hide'): this;
     $slot: {
         option: VNode[];
     }
diff --git a/src/components/dropdown/Dropdown.vue b/src/components/dropdown/Dropdown.vue
index 3d0ef0308..e9cbf7309 100644
--- a/src/components/dropdown/Dropdown.vue
+++ b/src/components/dropdown/Dropdown.vue
@@ -123,6 +123,14 @@ export default {
 
             return selectedOptionIndex;
         },
+        show() {
+            this.overlayVisible = true;
+            this.$emit('show');
+        },
+        hide() {
+            this.overlayVisible = false;
+            this.$emit('hide');
+        },
         onFocus() {
             this.focused = true;
         },
@@ -144,7 +152,7 @@ export default {
                 //space
                 case 32:
                     if (!this.overlayVisible) {
-                        this.overlayVisible = true;
+                        this.show();
                         event.preventDefault();
                     }
                 break;
@@ -153,14 +161,14 @@ export default {
                 case 13:
                 case 27:
                     if (this.overlayVisible) {
-                        this.overlayVisible = false;
+                        this.hide();
                         event.preventDefault();
                     }
                 break;
 
                 //tab
                 case 9:
-                    this.overlayVisible = false;
+                    this.hide();
                 break;
 
                 default:
@@ -194,7 +202,7 @@ export default {
         onDownKey(event) {
             if (this.visibleOptions) {
                 if (!this.overlayVisible && event.altKey) {
-                    this.overlayVisible = true;
+                    this.show();
                 }
                 else {
                     let nextOption = this.findNextOption(this.getSelectedOptionIndex());
@@ -255,7 +263,11 @@ export default {
                 return;
             }
             else if (!this.$refs.overlay || !this.$refs.overlay.contains(event.target)) {
-                this.overlayVisible = !this.overlayVisible;
+                if (this.overlayVisible)
+                    this.hide();
+                else
+                    this.show();
+                    
                 this.$refs.focusInput.focus();
             }
         },
@@ -265,7 +277,7 @@ export default {
             this.$refs.focusInput.focus();
 
             setTimeout(() => {
-                this.overlayVisible = false;
+                this.hide();
             }, 100);
         },
         onEditableInput(event) {
@@ -299,7 +311,7 @@ export default {
             if (!this.outsideClickListener) {
                 this.outsideClickListener = (event) => {
                     if (this.overlayVisible && this.$refs.overlay && !this.$refs.container.contains(event.target)) {
-                        this.overlayVisible = false;
+                        this.hide();
                     }
                 };
                 document.addEventListener('click', this.outsideClickListener);
diff --git a/src/components/multiselect/MultiSelect.d.ts b/src/components/multiselect/MultiSelect.d.ts
index 7bcd469c9..0de7be3ce 100644
--- a/src/components/multiselect/MultiSelect.d.ts
+++ b/src/components/multiselect/MultiSelect.d.ts
@@ -16,6 +16,8 @@ export declare class MultiSelect extends Vue {
     ariaLabelledBy?: string;
     $emit(eventName: 'input', value: any): this;
     $emit(eventName: 'change', e: {originalEvent: Event, value: any}): this;
+    $emit(eventName: 'show'): this;
+    $emit(eventName: 'hide'): this;
     $slots: {
         value: VNode[];
         option: VNode[];
diff --git a/src/components/multiselect/MultiSelect.vue b/src/components/multiselect/MultiSelect.vue
index 4997e1698..d6c61e665 100644
--- a/src/components/multiselect/MultiSelect.vue
+++ b/src/components/multiselect/MultiSelect.vue
@@ -118,6 +118,14 @@ export default {
 
             return selected;
         },
+        show() {
+            this.overlayVisible = true;
+            this.$emit('show');
+        },
+        hide() {
+            this.overlayVisible = false;
+            this.$emit('hide');
+        },
         onFocus() {
             this.focused = true;
         },
@@ -132,26 +140,30 @@ export default {
         },
         onClick() {
             if (!this.disabled && (!this.$refs.overlay || !this.$refs.overlay.contains(event.target))) {
-                this.overlayVisible = !this.overlayVisible;
+                if (this.overlayVisible)
+                    this.hide();
+                else
+                    this.show();
+
                 this.$refs.focusInput.focus();
             }
         },
         onCloseClick() {
-            this.overlayVisible = false;
+            this.hide();
         },
         onKeyDown(event) {
             switch(event.which) {
                 //down
                 case 40:
                     if (this.visibleOptions && !this.overlayVisible && event.altKey) {
-                        this.overlayVisible = true;
+                        this.show();
                     }
                 break;
 
                 //space
                 case 32:
                     if (!this.overlayVisible) {
-                        this.overlayVisible = true;
+                        this.show();
                         event.preventDefault();
                     }
                 break;
@@ -160,14 +172,14 @@ export default {
                 case 13:
                 case 27:
                     if (this.overlayVisible) {
-                        this.overlayVisible = false;
+                        this.hide();
                         event.preventDefault();
                     }
                 break;
 
                 //tab
                 case 9:
-                    this.overlayVisible = false;
+                    this.hide();
                 break;
 
                 default:
@@ -254,7 +266,7 @@ export default {
             if (!this.outsideClickListener) {
                 this.outsideClickListener = (event) => {
                     if (this.overlayVisible && this.isOutsideClicked(event)) {
-                        this.overlayVisible = false;
+                        this.hide();
                     }
                 };
                 document.addEventListener('click', this.outsideClickListener);
diff --git a/src/views/dropdown/DropdownDoc.vue b/src/views/dropdown/DropdownDoc.vue
index cde97c0c6..5d0a93ac7 100644
--- a/src/views/dropdown/DropdownDoc.vue
+++ b/src/views/dropdown/DropdownDoc.vue
@@ -187,6 +187,16 @@ data() {
                                 <td>input</td>
                                 <td>value: New value</td>
                                 <td>Callback to invoke on value change.</td>
+                            </tr>
+                            <tr>
+                                <td>show</td>
+                                <td>-</td>
+                                <td>Callback to invoke when the dropdown overlay is shown.</td>
+                            </tr>
+                            <tr>
+                                <td>hide</td>
+                                <td>-</td>
+                                <td>Callback to invoke when the dropdown overlay is hidden.</td>
                             </tr>
 						</tbody>
 					</table>
diff --git a/src/views/multiselect/MultiSelectDoc.vue b/src/views/multiselect/MultiSelectDoc.vue
index fba41d98b..2e93aad9a 100644
--- a/src/views/multiselect/MultiSelectDoc.vue
+++ b/src/views/multiselect/MultiSelectDoc.vue
@@ -180,6 +180,16 @@ data() {
                                 <td>value: New value</td>
                                 <td>Callback to invoke on value change.</td>
                             </tr>
+                            <tr>
+                                <td>show</td>
+                                <td>-</td>
+                                <td>Callback to invoke when the dropdown overlay is shown.</td>
+                            </tr>
+                            <tr>
+                                <td>hide</td>
+                                <td>-</td>
+                                <td>Callback to invoke when the dropdown overlay is hidden.</td>
+                            </tr>
                         </tbody>
                     </table>
                 </div>