From 0a689592077e72046b41ce83fca6887c1716707f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= <afc163@gmail.com>
Date: Mon, 16 Jan 2017 21:13:59 +0800
Subject: [PATCH] Fix openKeys and defaultOpenKeys of Menu, close #3783 (#4609)

---
 components/menu/__tests__/index.test.js | 85 +++++++++++++++++++++++++
 components/menu/demo/switch-mode.md     |  1 +
 components/menu/index.tsx               | 18 ++++--
 3 files changed, 98 insertions(+), 6 deletions(-)
 create mode 100644 components/menu/__tests__/index.test.js

diff --git a/components/menu/__tests__/index.test.js b/components/menu/__tests__/index.test.js
new file mode 100644
index 0000000000..1ec37a3004
--- /dev/null
+++ b/components/menu/__tests__/index.test.js
@@ -0,0 +1,85 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Menu from '..';
+
+const SubMenu = Menu.SubMenu;
+
+describe('Menu', () => {
+  it('should accept defaultOpenKeys in mode horizontal', () => {
+    const wrapper = mount(
+      <Menu defaultOpenKeys={['1']} mode="horizontal">
+        <SubMenu key="1" title="submenu1">
+          <Menu.Item key="submenu1">Option 1</Menu.Item>
+          <Menu.Item key="submenu2">Option 2</Menu.Item>
+        </SubMenu>
+        <Menu.Item key="2">menu2</Menu.Item>
+      </Menu>
+    );
+    expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).not.toBe(true);
+  });
+
+  it('should accept defaultOpenKeys in mode inline', () => {
+    const wrapper = mount(
+      <Menu defaultOpenKeys={['1']} mode="inline">
+        <SubMenu key="1" title="submenu1">
+          <Menu.Item key="submenu1">Option 1</Menu.Item>
+          <Menu.Item key="submenu2">Option 2</Menu.Item>
+        </SubMenu>
+        <Menu.Item key="2">menu2</Menu.Item>
+      </Menu>
+    );
+    expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).not.toBe(true);
+  });
+
+  it('should accept defaultOpenKeys in mode vertical', () => {
+    const wrapper = mount(
+      <Menu defaultOpenKeys={['1']} mode="vertical">
+        <SubMenu key="1" title="submenu1">
+          <Menu.Item key="submenu1">Option 1</Menu.Item>
+          <Menu.Item key="submenu2">Option 2</Menu.Item>
+        </SubMenu>
+        <Menu.Item key="2">menu2</Menu.Item>
+      </Menu>
+    );
+    expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).not.toBe(true);
+  });
+
+  it('should accept openKeys in mode horizontal', () => {
+    const wrapper = mount(
+      <Menu openKeys={['1']} mode="horizontal">
+        <SubMenu key="1" title="submenu1">
+          <Menu.Item key="submenu1">Option 1</Menu.Item>
+          <Menu.Item key="submenu2">Option 2</Menu.Item>
+        </SubMenu>
+        <Menu.Item key="2">menu2</Menu.Item>
+      </Menu>
+    );
+    expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).not.toBe(true);
+  });
+
+  it('should accept openKeys in mode inline', () => {
+    const wrapper = mount(
+      <Menu openKeys={['1']} mode="inline">
+        <SubMenu key="1" title="submenu1">
+          <Menu.Item key="submenu1">Option 1</Menu.Item>
+          <Menu.Item key="submenu2">Option 2</Menu.Item>
+        </SubMenu>
+        <Menu.Item key="2">menu2</Menu.Item>
+      </Menu>
+    );
+    expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).not.toBe(true);
+  });
+
+  it('should accept openKeys in mode vertical', () => {
+    const wrapper = mount(
+      <Menu openKeys={['1']} mode="vertical">
+        <SubMenu key="1" title="submenu1">
+          <Menu.Item key="submenu1">Option 1</Menu.Item>
+          <Menu.Item key="submenu2">Option 2</Menu.Item>
+        </SubMenu>
+        <Menu.Item key="2">menu2</Menu.Item>
+      </Menu>
+    );
+    expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).not.toBe(true);
+  });
+});
diff --git a/components/menu/demo/switch-mode.md b/components/menu/demo/switch-mode.md
index d869e7584d..815e023fff 100755
--- a/components/menu/demo/switch-mode.md
+++ b/components/menu/demo/switch-mode.md
@@ -69,5 +69,6 @@ const Sider = React.createClass({
     );
   },
 });
+
 ReactDOM.render(<Sider />, mountNode);
 ````
diff --git a/components/menu/index.tsx b/components/menu/index.tsx
index 5044063274..4c8eb3eda1 100644
--- a/components/menu/index.tsx
+++ b/components/menu/index.tsx
@@ -71,8 +71,15 @@ export default class Menu extends React.Component<MenuProps, any> {
       'see: http://u.ant.design/menu-on-open-change.'
     );
 
+    let openKeys;
+    if ('defaultOpenKeys' in props) {
+      openKeys = props.defaultOpenKeys;
+    } else if ('openKeys' in props) {
+      openKeys = props.openKeys;
+    }
+
     this.state = {
-      openKeys: [],
+      openKeys,
     };
   }
   componentWillReceiveProps(nextProps) {
@@ -87,7 +94,7 @@ export default class Menu extends React.Component<MenuProps, any> {
   handleClick = (e) => {
     this.setOpenKeys([]);
 
-    const onClick = this.props.onClick;
+    const { onClick } = this.props;
     if (onClick) {
       onClick(e);
     }
@@ -95,7 +102,7 @@ export default class Menu extends React.Component<MenuProps, any> {
   handleOpenChange = (openKeys: string[]) => {
     this.setOpenKeys(openKeys);
 
-    const onOpenChange = this.props.onOpenChange;
+    const { onOpenChange } = this.props;
     if (onOpenChange) {
       onOpenChange(openKeys);
     }
@@ -132,9 +139,8 @@ export default class Menu extends React.Component<MenuProps, any> {
     let props = {};
     const className = `${this.props.className} ${this.props.prefixCls}-${this.props.theme}`;
     if (this.props.mode !== 'inline') {
-      // 这组属性的目的是
-      // 弹出型的菜单需要点击后立即关闭
-      // 另外，弹出型的菜单的受控模式没有使用场景
+      // There is this.state.openKeys for
+      // closing vertical popup submenu after click it
       props = {
         openKeys: this.state.openKeys,
         onClick: this.handleClick,
-- 
GitLab