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

---
 packages/cascader/src/menu.vue | 31 ++++++++++++++++++++++++++++---
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/packages/cascader/src/menu.vue b/packages/cascader/src/menu.vue
index b1daee966..b90e7a988 100644
--- a/packages/cascader/src/menu.vue
+++ b/packages/cascader/src/menu.vue
@@ -1,5 +1,6 @@
 <script>
   import { isDef } from 'element-ui/src/utils/shared';
+  import scrollIntoView from 'element-ui/src/utils/scroll-into-view';
 
   export default {
     name: 'ElCascaderMenu',
@@ -94,6 +95,19 @@
         } else {
           this.$emit('activeItemChange', this.activeValue);
         }
+      },
+      scrollMenu(menu) {
+        scrollIntoView(menu, menu.getElementsByClassName('is-active')[0]);
+      },
+      handleMenuEnter() {
+        this.$nextTick(() => this.getMenus().forEach(menu => this.scrollMenu(menu)));
+      },
+      getMenus() {
+        if (this.$refs.wrapper) {
+          return Array.prototype.slice.call(this.$refs.wrapper.getElementsByClassName('el-cascader-menu'));
+        } else {
+          return [];
+        }
       }
     },
 
@@ -121,9 +135,19 @@
                 click: 'click',
                 hover: 'mouseenter'
               }[expandTrigger];
-              events.on[triggerEvent] = () => { this.activeItem(item, menuIndex); };
+              events.on[triggerEvent] = () => {
+                this.activeItem(item, menuIndex);
+                this.$nextTick(() => {
+                  // adjust self and next level
+                  this.scrollMenu(this.getMenus()[menuIndex]);
+                  this.scrollMenu(this.getMenus()[menuIndex + 1]);
+                });
+              };
             } else {
-              events.on.click = () => { this.select(item, menuIndex); };
+              events.on.click = () => {
+                this.select(item, menuIndex);
+                this.$nextTick(() => this.scrollMenu(this.getMenus()[menuIndex]));
+              };
             }
           }
 
@@ -158,13 +182,14 @@
         );
       });
       return (
-        <transition name="el-zoom-in-top" on-after-leave={this.handleMenuLeave}>
+        <transition name="el-zoom-in-top" on-before-enter={this.handleMenuEnter} on-after-leave={this.handleMenuLeave}>
           <div
             v-show={visible}
             class={[
               'el-cascader-menus',
               popperClass
             ]}
+            ref="wrapper"
           >
             {menus}
           </div>