From a32a3ef88b61e84e274245755ecaff6efb7028f1 Mon Sep 17 00:00:00 2001
From: "wacky6.AriesMBP" <416707889@qq.com>
Date: Wed, 12 Jul 2017 01:14:49 +0800
Subject: [PATCH] TimeSelect: auto scroll to selected option

---
 packages/date-picker/src/panel/time-select.vue | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/date-picker/src/panel/time-select.vue b/packages/date-picker/src/panel/time-select.vue
index dd450acd2..185188e4a 100644
--- a/packages/date-picker/src/panel/time-select.vue
+++ b/packages/date-picker/src/panel/time-select.vue
@@ -1,6 +1,7 @@
 <template>
-  <transition name="el-zoom-in-top" @after-leave="$emit('dodestroy')">
+  <transition name="el-zoom-in-top" @before-enter="handleMenuEnter" @after-leave="$emit('dodestroy')">
     <div
+      ref="popper"
       v-show="visible"
       :style="{ width: width + 'px' }"
       :class="popperClass"
@@ -18,6 +19,7 @@
 
 <script type="text/babel">
   import ElScrollbar from 'element-ui/packages/scrollbar';
+  import scrollIntoView from 'element-ui/src/utils/scroll-into-view';
 
   const parseTime = function(time) {
     const values = ('' || time).split(':');
@@ -81,6 +83,7 @@
         } else if (this.maxTime && compareTime(val, this.maxTime) > 0) {
           this.$emit('pick');
         }
+        this.$nextTick(() => this.scrollToOption());
       }
     },
 
@@ -93,6 +96,15 @@
 
       handleClear() {
         this.$emit('pick');
+      },
+
+      scrollToOption(className = 'selected') {
+        const menu = this.$refs.popper.querySelector('.el-picker-panel__content');
+        scrollIntoView(menu, menu.getElementsByClassName(className)[0]);
+      },
+
+      handleMenuEnter() {
+        this.$nextTick(() => this.scrollToOption());
       }
     },