Refactored #150

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: {

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) {

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: {

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);

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>

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>