Material-ui: [Menu] Support nested menus

[thundermiracle]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

In v0.19, nested menus can be created by adding menuItems prop, is it possible to do the same thing in v1?
http://www.material-ui.com/#/components/menu

<MenuItem
  primaryText="Custom: 1.2"
  checked={true}
  rightIcon={<ArrowDropRight />}
  menuItems={[
    <MenuItem primaryText="Show Level 2" />,
  ]}
/>

Current Behavior

I've already checked the samples in List, but showing sub-menus on right instead of bottom is more preferable.
https://material-ui-1dab0.firebaseapp.com/demos/lists/

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | v1.0.0-beta.9 |
| React | 15.6.1 |
| browser | Chrome Version 60.0.3112.90 |

[dapetcu21]

Until this is implemented, I made this component as a quick and dirty hack to get this functionality working in my project and I figure I'd share it.

// @flow

import * as React from 'react';

import MuiMenuItem from 'material-ui-next/Menu/MenuItem';
import Menu from 'material-ui-next/Menu/Menu';
import type { Props as MuiProps } from 'material-ui-next/Menu/MenuItem';
import ArrowDropDown from 'material-ui-icons/ArrowDropDown';
import { black65 } from '../../constants/Colors';

type Props = MuiProps & {
  menuItems: React.Node,
};

type State = {
  anchorEl: ?HTMLElement,
  open: boolean,
};

export default class NestingMenuItem extends React.Component<Props, State> {
  state = {
    anchorEl: null,
    open: false,
  };

  anchor = null;

  handleClick = (event: SyntheticEvent<HTMLElement>) => {
    event.stopPropagation();
    this.setState({
      open: true,
      anchorEl: this.anchor,
    });
  }

  handleRequestClose = () => {
    this.setState({ open: false });
    // A bit of a hack, but we have no other way of closing the whole tree
    // without cooperating with the parent Menu
    document.querySelectorAll('div[class^="MuiBackdrop-"]').forEach((backdrop) => {
      backdrop.click();
    });
  }

  render () {
    const { children, menuItems, ...other } = this.props;
    const { anchorEl, open } = this.state;

    return (
      <MuiMenuItem
        {...other}
        onClick={this.handleClick}
      >
        {children}
        <ArrowDropDown
          style={{ float: 'right', transform: 'rotate(-90deg)', marginLeft: 'auto' }}
          color={black65}
        />
        <div
          ref={(el) => { this.anchor = el; }}
          style={{ position: 'absolute', right: 0 }}
        />
        <Menu
          open={open}
          anchorEl={anchorEl}
          onRequestClose={this.handleRequestClose}
        >
          {React.Children.map(menuItems, menuItem => (
            React.isValidElement(menuItem)
              ? React.cloneElement((menuItem: any), {
                onClick: this.handleRequestClose,
                ...((menuItem: any): React.Element<*>).props,
              })
              : menuItem
          ))}
        </Menu>
      </MuiMenuItem>
    );
  }
}

[frankbolviken]

why remove the v1 label? This is a pretty important feature I would believe.

[oliviertassinari]

@frankbolviken The feature hasn't been removed, it's not ported yet.

[hamilton]

Would it be possible to add this to the documentation (just a note stating that nested menus are not implemented yet)? I ported over an app using 0.20.0 to beta-35 a couple of weeks ago and assumed that this feature would be available, and now feel I should revert back to 0.20.0. I guess it is my fault for not checking the release notes more thoroughly, but the readme strongly suggests everyone jump to beta.

EDIT: I suppose this IS documented via cascading menus not having a little check next to it.

[tiagowippel]

You can use both versions together, check this: https://material-ui-next.com/guides/migration-v0.x

[chriszhangusc]

Any updates on this feature?

[tiagowippel]

Hi folks,

someone can answer if is there a plan to implement this feature, before the v1 final release ?

[mbrookes]

@tiagowippel This isn't planned for v1, but if you would like to see it happen sooner, by all means feel free to start working on it.

[pavanshinde47]

@oliviertassinari Is there anyone working on it? It seem to be an issue for those who are migrating from v0.x to v1.x

[mbrookes]

@pavanshinde47 Noone's working on it, so feel free to take it.

[pavanshinde47]

@mbrookes I am sorry, I am not sure who Noone is. What should i take?

[matthiasp42]

Noone = Nobody.

Nobody is working on it right now and you are free to _take it_ up yourself.
As in you can develop it yourself and make a pull request.

[mbrookes]

Thanks @matthiasp42. @pavanshinde47 sorry for causing the confusion!

[oliviertassinari]

It seems we are already supporting nested menus. We need to document it: #11723. To see if we can abstract some of it.

[koshkarik]

Hi guys! Do you have any plans to implement this feature in the nearest future?

[eps1lon]

Closing this issue in favor of #11723 since #11723 has a bounty on issuehunt attached to it. I would prefer to continue here but I don't know what would happen to the bounty.