diff --git a/src/components/dropdown/Dropdown.d.ts b/src/components/dropdown/Dropdown.d.ts
index 3ec4a5787..8fd268587 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: 'before-show'): this;
+    $emit(eventName: 'before-leave'): this;
     $emit(eventName: 'show'): this;
     $emit(eventName: 'hide'): this;
     $slot: {
diff --git a/src/components/dropdown/Dropdown.vue b/src/components/dropdown/Dropdown.vue
index e9cbf7309..48a3eb506 100644
--- a/src/components/dropdown/Dropdown.vue
+++ b/src/components/dropdown/Dropdown.vue
@@ -124,12 +124,12 @@ export default {
             return selectedOptionIndex;
         },
         show() {
+            this.$emit('before-show');
             this.overlayVisible = true;
-            this.$emit('show');
         },
         hide() {
+            this.$emit('before-hide');
             this.overlayVisible = false;
-            this.$emit('hide');
         },
         onFocus() {
             this.focused = true;
@@ -291,9 +291,12 @@ export default {
             if (this.filter) {
                 this.$refs.filterInput.focus();
             }
+
+            this.$emit('show');
         },
         onOverlayLeave() {
             this.unbindOutsideClickListener();
+            this.$emit('hide');
         },
         alignOverlay() {
             if (this.appendTo) {
diff --git a/src/components/multiselect/MultiSelect.d.ts b/src/components/multiselect/MultiSelect.d.ts
index 0de7be3ce..2376ba12b 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: 'before-show'): this;
+    $emit(eventName: 'before-leave'): this;
     $emit(eventName: 'show'): this;
     $emit(eventName: 'hide'): this;
     $slots: {
diff --git a/src/components/multiselect/MultiSelect.vue b/src/components/multiselect/MultiSelect.vue
index d6c61e665..9c5c9633b 100644
--- a/src/components/multiselect/MultiSelect.vue
+++ b/src/components/multiselect/MultiSelect.vue
@@ -119,12 +119,12 @@ export default {
             return selected;
         },
         show() {
+            this.$emit('before-show');
             this.overlayVisible = true;
-            this.$emit('show');
         },
         hide() {
+            this.$emit('before-hide');
             this.overlayVisible = false;
-            this.$emit('hide');
         },
         onFocus() {
             this.focused = true;
@@ -255,9 +255,11 @@ export default {
         onOverlayEnter() {
             this.alignOverlay();
             this.bindOutsideClickListener();
+            this.$emit('show');
         },
         onOverlayLeave() {
             this.unbindOutsideClickListener();
+            this.$emit('hide');
         },
         alignOverlay() {
             DomHandler.relativePosition(this.$refs.overlay, this.$refs.container);
diff --git a/src/views/dropdown/DropdownDoc.vue b/src/views/dropdown/DropdownDoc.vue
index 5d0a93ac7..30d48bec1 100644
--- a/src/views/dropdown/DropdownDoc.vue
+++ b/src/views/dropdown/DropdownDoc.vue
@@ -188,15 +188,25 @@ data() {
                                 <td>value: New value</td>
                                 <td>Callback to invoke on value change.</td>
                             </tr>
+                            <tr>
+                                <td>before-show</td>
+                                <td>-</td>
+                                <td>Callback to invoke before the overlay is shown.</td>
+                            </tr>
+                            <tr>
+                                <td>before-hide</td>
+                                <td>-</td>
+                                <td>Callback to invoke before the overlay is hidden.</td>
+                            </tr>
                             <tr>
                                 <td>show</td>
                                 <td>-</td>
-                                <td>Callback to invoke when the dropdown overlay is shown.</td>
+                                <td>Callback to invoke when the overlay is shown.</td>
                             </tr>
                             <tr>
                                 <td>hide</td>
                                 <td>-</td>
-                                <td>Callback to invoke when the dropdown overlay is hidden.</td>
+                                <td>Callback to invoke when the overlay is hidden.</td>
                             </tr>
 						</tbody>
 					</table>
diff --git a/src/views/multiselect/MultiSelectDoc.vue b/src/views/multiselect/MultiSelectDoc.vue
index 2e93aad9a..b33dbad52 100644
--- a/src/views/multiselect/MultiSelectDoc.vue
+++ b/src/views/multiselect/MultiSelectDoc.vue
@@ -180,15 +180,25 @@ data() {
                                 <td>value: New value</td>
                                 <td>Callback to invoke on value change.</td>
                             </tr>
+                            <tr>
+                                <td>before-show</td>
+                                <td>-</td>
+                                <td>Callback to invoke before the overlay is shown.</td>
+                            </tr>
+                            <tr>
+                                <td>before-hide</td>
+                                <td>-</td>
+                                <td>Callback to invoke before the overlay is hidden.</td>
+                            </tr>
                             <tr>
                                 <td>show</td>
                                 <td>-</td>
-                                <td>Callback to invoke when the dropdown overlay is shown.</td>
+                                <td>Callback to invoke when the overlay is shown.</td>
                             </tr>
                             <tr>
                                 <td>hide</td>
                                 <td>-</td>
-                                <td>Callback to invoke when the dropdown overlay is hidden.</td>
+                                <td>Callback to invoke when the overlay is hidden.</td>
                             </tr>
                         </tbody>
                     </table>