From d2f852a3205a7566d7de2f3b8f314babfcc608a9 Mon Sep 17 00:00:00 2001
From: baiyaaaaa <bigpet1991@gmail.com>
Date: Tue, 20 Dec 2016 18:42:44 +0800
Subject: [PATCH] add dropdown hide-on-click prop

---
 examples/docs/en-US/dropdown.md    |  1 +
 examples/docs/zh-CN/dropdown.md    |  1 +
 packages/dropdown/src/dropdown.vue | 10 ++++++--
 test/unit/specs/dropdown.spec.js   | 38 ++++++++++++++++++++++++++++--
 4 files changed, 46 insertions(+), 4 deletions(-)

diff --git a/examples/docs/en-US/dropdown.md b/examples/docs/en-US/dropdown.md
index 86658eecd..beb0aba1c 100644
--- a/examples/docs/en-US/dropdown.md
+++ b/examples/docs/en-US/dropdown.md
@@ -113,6 +113,7 @@ Click the triggering element or hover on it.
 | size          | component size, refer to `Button` component     | string          | large, small, mini  |  —  |
 | menu-align    | horizontal alignment     | string          | start/end  | end |
 | trigger       | how to trigger     | string  |    hover/click  |  hover |
+| hide-on-click | whether to hide menu after clicking menu-item     | boolean          | -  | true |
 
 ### Dropdown Events
 | Event Name | Description | Parameters |
diff --git a/examples/docs/zh-CN/dropdown.md b/examples/docs/zh-CN/dropdown.md
index 0730ffb27..0afd6519e 100644
--- a/examples/docs/zh-CN/dropdown.md
+++ b/examples/docs/zh-CN/dropdown.md
@@ -156,6 +156,7 @@
 | split-button  | 下拉触发元素呈现为按钮组    | boolean  |    —  |  false |
 | menu-align    | 菜单水平对齐方向     | string          | start, end  | end |
 | trigger       | 触发下拉的行为     | string          | hover, click  | hover |
+| hide-on-click | 是否在点击菜单项后隐藏菜单     | boolean          | -  | true |
 
 ### Dropdown Events
 | 事件名称      | 说明    | 回调参数      |
diff --git a/packages/dropdown/src/dropdown.vue b/packages/dropdown/src/dropdown.vue
index 71f21f2d8..cd0120d86 100644
--- a/packages/dropdown/src/dropdown.vue
+++ b/packages/dropdown/src/dropdown.vue
@@ -22,7 +22,11 @@
       },
       type: String,
       size: String,
-      splitButton: Boolean
+      splitButton: Boolean,
+      hideOnClick: {
+        type: Boolean,
+        default: true
+      }
     },
 
     data() {
@@ -78,7 +82,9 @@
         }
       },
       handleMenuItemClick(command, instance) {
-        this.visible = false;
+        if (this.hideOnClick) {
+          this.visible = false;
+        }
         this.$emit('command', command, instance);
       }
     },
diff --git a/test/unit/specs/dropdown.spec.js b/test/unit/specs/dropdown.spec.js
index d0185fdae..e79eb9df1 100644
--- a/test/unit/specs/dropdown.spec.js
+++ b/test/unit/specs/dropdown.spec.js
@@ -46,7 +46,7 @@ describe('Dropdown', () => {
           <span class="el-dropdown-link">
             下拉菜单<i class="el-icon-caret-bottom el-icon-right"></i>
           </span>
-          <el-dropdown-menu slot="dropdown" class="dropdown-test-menu-click">
+          <el-dropdown-menu slot="dropdown">
             <el-dropdown-item command="a">黄金糕</el-dropdown-item>
             <el-dropdown-item command="b">狮子头</el-dropdown-item>
             <el-dropdown-item ref="commandC" command="c">螺蛳粉</el-dropdown-item>
@@ -81,7 +81,7 @@ describe('Dropdown', () => {
           <span class="el-dropdown-link">
             下拉菜单trigger click<i class="el-icon-caret-bottom el-icon-right"></i>
           </span>
-          <el-dropdown-menu slot="dropdown" class="dropdown-test-menu-click">
+          <el-dropdown-menu slot="dropdown">
             <el-dropdown-item>黄金糕</el-dropdown-item>
             <el-dropdown-item @click.native="handleClick">狮子头</el-dropdown-item>
             <el-dropdown-item>螺蛳粉</el-dropdown-item>
@@ -147,4 +147,38 @@ describe('Dropdown', () => {
       }, 300);
     }, 300);
   });
+  it('hide on click', done => {
+    vm = createVue({
+      template: `
+        <el-dropdown ref="dropdown" :hide-on-click="false">
+          <span class="el-dropdown-link">
+            下拉菜单<i class="el-icon-caret-bottom el-icon-right"></i>
+          </span>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item command="a">黄金糕</el-dropdown-item>
+            <el-dropdown-item command="b">狮子头</el-dropdown-item>
+            <el-dropdown-item ref="commandC" command="c">螺蛳粉</el-dropdown-item>
+            <el-dropdown-item command="d">双皮奶</el-dropdown-item>
+            <el-dropdown-item command="e">蚵仔煎</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      `
+    }, true);
+    let dropdown = vm.$refs.dropdown;
+    let dropdownElm = dropdown.$el;
+    let triggerElm = dropdownElm.children[0];
+    let callback = sinon.spy();
+
+    dropdown.$on('command', callback);
+
+    triggerEvent(triggerElm, 'mouseenter');
+    setTimeout(_ => {
+      vm.$refs.commandC.$el.click();
+      setTimeout(_ => {
+        expect(dropdown.visible).to.true;
+        expect(callback.calledWith('c')).to.be.true;
+        done();
+      }, 300);
+    }, 300);
+  });
 });