scroll selected option into view

Author: marcosmoura

src/components/mdSelect/mdOption.vue

@@ -55,7 +55,7 @@
       },
       setParentOption() {
         if (!this.isMultiple()) {
-          this.parentSelect.selectOption(this.value, this.$refs.item.textContent);
+          this.parentSelect.selectOption(this.value, this.$refs.item.textContent, this.$el);
         } else {
           this.check = !this.check;
         }

src/components/mdSelect/mdSelect.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="md-select" :class="[themeClass, classes]">
-    <md-menu :md-close-on-select="!multiple" @opened="$emit('open')" @closed="$emit('close')">
+    <md-menu :md-close-on-select="!multiple" @open="onOpen" @close="$emit('closed')">
       <span class="md-select-value" md-menu-trigger ref="value">{{ selectedText || placeholder }}</span>
 
       <md-menu-content class="md-select-content" :class="[themeClass, contentClasses]">
@@ -36,6 +36,7 @@
     mixins: [theme],
     data() {
       return {
+        lastSelected: null,
         selectedValue: null,
         selectedText: null,
         multipleOptions: {},
@@ -72,6 +73,13 @@
       }
     },
     methods: {
+      onOpen() {
+        if (this.lastSelected) {
+          this.lastSelected.scrollIntoViewIfNeeded(true);
+        }
+
+        this.$emit('opened');
+      },
       setParentDisabled() {
         this.parentContainer.isDisabled = this.disabled;
       },
@@ -154,7 +162,8 @@
 
         this.changeValue(values);
       },
-      selectOption(value, text) {
+      selectOption(value, text, el) {
+        this.lastSelected = el;
         this.selectedText = text;
         this.setTextAndValue(value);
         this.changeValue(value);