When a child Menu.Item was selected, its parent SubMenu should be expanded

What problem does this feature solve?

Suppose we have a menu:

<Menu defaultSelectedKeys={['sub-1', 'sub-sub-1']}>
  <Menu.SubMenu key='sub'>
    <Menu.Item key='sub-1'>
    </Menu.Item>
    <Menu.SubMenu key='sub-sub'>
      <Menu.Item key='sub-sub-1'>
      </Menu.Item>
    </Menu.SubMenu>
  </Menu.SubMenu>
</Menu>

Since defaultSelectedKeys is [‘sub-1’, ‘sub-sub-1’], the SubMenu sub and sub-sub should be automatically expanded.

What does the proposed API look like?

FYI

[theodorDiaconu]

@afc163 why did you close the ticket? It seems like a useful feature, you can leave the default you prefer, but implementing this can be somewhat hard. Think about this scenario: you have a submenu called Users and under it “List”/“New” you would like that when you click “New” to change the route, and keep Users menu expanded, otherwise it results in weird behaviour.

[theodorDiaconu]

Maybe another developer hits this and I save him 15-20 mins of his time:

import React from 'react';
import { Menu, Icon } from 'antd';
import { withRouter } from 'react-router';

const SubMenu = Menu.SubMenu;

const menu = [
  { icon: 'pie-chart', label: 'Items List', path: '/items/list' },
  {
    icon: 'pie-chart',
    label: 'Items',
    key: 'items',
    isSelected: path => path.indexOf('/items') === 0,
    items: [
      { icon: 'pie-chart', label: 'List', path: '/items/list' },
      { icon: 'pie-chart', label: 'New', path: '/items/new' },
    ],
  },
];

class MainMenu extends React.Component {
  render() {
    const { pathname } = this.props.location;
    const selectedOrOpenKeys = this.getSelectedKeys(menu, pathname);

    return (
      <Menu
        theme="dark"
        defaultSelectedKeys={['1']}
        mode="inline"
        defaultOpenKeys={selectedOrOpenKeys}
        defaultSelectedKeys={selectedOrOpenKeys}
      >
        {menu.map(this.renderMenuItem)}
      </Menu>
    );
  }

  getSelectedKeys(items, pathname) {
    let selectedKeys = [];

    items.map(item => {
      if (item.isSelected) {
        if (item.isSelected(pathname)) {
          selectedKeys.push(item.key ? item.key : item.path);
        }
      } else {
        if (item.path === pathname || item.key === pathname) {
          selectedKeys.push(item.key ? item.key : item.path);
        }
      }
      if (item.items) {
        const itemKeys = this.getSelectedKeys(item.items, pathname);
        selectedKeys.push(...itemKeys);
      }
    });

    return selectedKeys;
  }

  renderMenuItem = item => {
    const { label, path, items, icon, key, ...rest } = item;

    if (item.items) {
      const title = (
        <span>
          {icon && <Icon type={icon} />}
          <span>{label}</span>
        </span>
      );
      return (
        <SubMenu key={key || path} title={title}>
          {items.map(this.renderMenuItem)}
        </SubMenu>
      );
    }

    return (
      <Menu.Item key={key || path} {...rest}>
        {icon && <Icon type="file" />}
        <span onClick={() => this.props.history.push(path)}>{label}</span>
      </Menu.Item>
    );
  };
}

export default withRouter(MainMenu);