From 7bee91a51739ae13ff27c062ea2779651a54c4d5 Mon Sep 17 00:00:00 2001
From: hetech <dengzhiyang123@126.com>
Date: Thu, 14 Jun 2018 17:50:10 +0800
Subject: [PATCH] Cascader: close when option clicked (#11623)

* Cascader: close when option clicked in hover mode

* update menu.vue
---
 packages/cascader/src/main.vue   |  4 +-
 packages/cascader/src/menu.vue   |  7 ++++
 test/unit/specs/cascader.spec.js | 70 ++++++++++++++++++++++++++++++++
 3 files changed, 79 insertions(+), 2 deletions(-)

diff --git a/packages/cascader/src/main.vue b/packages/cascader/src/main.vue
index 17b63ec36..3f4f91960 100644
--- a/packages/cascader/src/main.vue
+++ b/packages/cascader/src/main.vue
@@ -389,8 +389,8 @@ export default {
       ev.stopPropagation();
       this.handlePick([], true);
     },
-    handleClickoutside() {
-      if (this.menuVisible) {
+    handleClickoutside(pickFinished = false) {
+      if (this.menuVisible && !pickFinished) {
         this.needFocus = false;
       }
       this.menuVisible = false;
diff --git a/packages/cascader/src/menu.vue b/packages/cascader/src/menu.vue
index 826c6bd7c..d664c67d2 100644
--- a/packages/cascader/src/menu.vue
+++ b/packages/cascader/src/menu.vue
@@ -238,6 +238,13 @@
                 });
               };
               events.on[triggerEvent] = triggerHandler;
+              if (triggerEvent === 'mouseenter' && this.changeOnSelect) {
+                events.on.click = () => {
+                  if (this.activeValue.indexOf(item.value) !== -1) {
+                    this.$emit('closeInside', true);
+                  }
+                };
+              }
               events.on['mousedown'] = () => {
                 this.clicking = true;
               };
diff --git a/test/unit/specs/cascader.spec.js b/test/unit/specs/cascader.spec.js
index 28cf843d7..e8c7dac41 100644
--- a/test/unit/specs/cascader.spec.js
+++ b/test/unit/specs/cascader.spec.js
@@ -538,6 +538,76 @@ describe('Cascader', () => {
       });
     }, 300);
   });
+  it('hover and select', done => {
+    vm = createVue({
+      template: `
+        <el-cascader
+          ref="cascader"
+          placeholder="请选择"
+          :options="options"
+          expand-trigger="hover"
+          change-on-select
+          v-model="selectedOptions"
+        ></el-cascader>
+      `,
+      data() {
+        return {
+          options: [{
+            value: 'zhejiang',
+            label: 'Zhejiang',
+            children: [{
+              value: 'hangzhou',
+              label: 'Hangzhou',
+              children: [{
+                value: 'xihu',
+                label: 'West Lake'
+              }]
+            }, {
+              value: 'ningbo',
+              label: 'NingBo',
+              children: [{
+                value: 'jiangbei',
+                label: 'Jiang Bei'
+              }]
+            }]
+          }, {
+            value: 'jiangsu',
+            label: 'Jiangsu',
+            children: [{
+              value: 'nanjing',
+              label: 'Nanjing',
+              children: [{
+                value: 'zhonghuamen',
+                label: 'Zhong Hua Men'
+              }]
+            }]
+          }],
+          selectedOptions: []
+        };
+      }
+    }, true);
+    vm.$el.click();
+    vm.$nextTick(() => {
+      const menu = vm.$refs.cascader.menu;
+      const menuElm = menu.$el;
+      const item1 = menuElm.querySelector('.el-cascader-menu__item');
+
+      triggerEvent(item1, 'mouseenter');
+      menu.$nextTick(() => {
+        expect(vm.selectedOptions[0]).to.be.equal('zhejiang');
+
+        const spy = sinon.spy();
+        menu.$on('closeInside', spy);
+        item1.click();
+
+        menu.$nextTick(() => {
+          expect(spy.calledWith(true)).to.be.true;
+          expect(menu.visible).to.be.false;
+          done();
+        });
+      });
+    });
+  });
   it('filterable', done => {
     vm = createVue({
       template: `