Select: rework auto scroll to selected option

packages/select/src/select.vue

@@ -66,8 +66,8 @@
     </el-input>
     <transition
       name="el-zoom-in-top"
-      @after-leave="doDestroy"
-      @after-enter="handleMenuEnter">
+      @before-enter="handleMenuEnter"
+      @after-leave="doDestroy">
       <el-select-menu
         ref="popper"
         v-show="visible && emptyText !== false">
@@ -103,6 +103,7 @@
   import { addClass, removeClass, hasClass } from 'element-ui/src/utils/dom';
   import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event';
   import { t } from 'element-ui/src/locale';
+  import scrollIntoView from 'element-ui/src/utils/scroll-into-view';
   const sizeMap = {
     'large': 42,
     'small': 30,
@@ -208,13 +209,10 @@
         cachedPlaceHolder: '',
         optionsCount: 0,
         filteredOptionsCount: 0,
-        dropdownUl: null,
         visible: false,
         selectedLabel: '',
         hoverIndex: -1,
         query: '',
-        bottomOverflow: 0,
-        topOverflow: 0,
         optionsAllDisabled: false,
         inputHovering: false,
         currentPlaceholder: ''
@@ -290,7 +288,6 @@
             }
           });
           if (!this.multiple) {
-            this.getOverflows();
             if (this.selected) {
               if (this.filterable && this.allowCreate &&
                 this.createdSelected && this.createdOption) {
@@ -351,31 +348,13 @@
         }
       },
 
-      handleMenuEnter() {
-        if (!this.dropdownUl) {
-          this.dropdownUl = this.$refs.popper.$el.querySelector('.el-select-dropdown__wrap');
-          this.getOverflows();
-        }
-        if (!this.multiple && this.dropdownUl) {
-          this.resetMenuScroll();
-        }
-      },
-
-      getOverflows() {
-        if (this.dropdownUl && this.selected && this.selected.$el) {
-          let selectedRect = this.selected.$el.getBoundingClientRect();
-          let popperRect = this.$refs.popper.$el.getBoundingClientRect();
-          this.bottomOverflow = selectedRect.bottom - popperRect.bottom;
-          this.topOverflow = selectedRect.top - popperRect.top;
-        }
+      scrollToOption(className = 'selected') {
+        const menu = this.$refs.popper.$el.querySelector('.el-select-dropdown__wrap');
+        scrollIntoView(menu, menu.getElementsByClassName(className)[0]);
       },
 
-      resetMenuScroll() {
-        if (this.bottomOverflow > 0) {
-          this.dropdownUl.scrollTop += this.bottomOverflow;
-        } else if (this.topOverflow < 0) {
-          this.dropdownUl.scrollTop += this.topOverflow;
-        }
+      handleMenuEnter() {
+        this.$nextTick(() => this.scrollToOption());
       },
 
       getOption(value) {
@@ -534,6 +513,7 @@
           this.$emit('input', option.value);
           this.visible = false;
         }
+        this.$nextTick(() => this.scrollToOption());
       },
 
       toggleMenu() {
@@ -558,7 +538,6 @@
             if (this.hoverIndex === this.options.length) {
               this.hoverIndex = 0;
             }
-            this.resetScrollTop();
             if (this.options[this.hoverIndex].disabled === true ||
               this.options[this.hoverIndex].groupDisabled === true ||
               !this.options[this.hoverIndex].visible) {
@@ -570,7 +549,6 @@
             if (this.hoverIndex < 0) {
               this.hoverIndex = this.options.length - 1;
             }
-            this.resetScrollTop();
             if (this.options[this.hoverIndex].disabled === true ||
               this.options[this.hoverIndex].groupDisabled === true ||
               !this.options[this.hoverIndex].visible) {
@@ -578,19 +556,7 @@
             }
           }
         }
-      },
-
-      resetScrollTop() {
-        let bottomOverflowDistance = this.options[this.hoverIndex].$el.getBoundingClientRect().bottom -
-          this.$refs.popper.$el.getBoundingClientRect().bottom;
-        let topOverflowDistance = this.options[this.hoverIndex].$el.getBoundingClientRect().top -
-          this.$refs.popper.$el.getBoundingClientRect().top;
-        if (bottomOverflowDistance > 0) {
-          this.dropdownUl.scrollTop += bottomOverflowDistance;
-        }
-        if (topOverflowDistance < 0) {
-          this.dropdownUl.scrollTop += topOverflowDistance;
-        }
+        this.$nextTick(() => this.scrollToOption('hover'));
       },
 
       selectOption() {