MenuItem close when has children

[ffrizzo]

Problem description

I'm trying to use on AppBar with the IconMenu and MenuItem. This works for the first children in the
tree. But when I'm trying to use children of a children this wont work.

This work

MenuItem
     MenuItem

This wont work

MenuItem
     MenuItem
           MenuItem

I'm trying to figure out what's happen but until now I doesn't have success. If someone can point me to where I can fix this I can work and make a PR

Example of code

http://www.webpackbin.com/4JN_dLi0-

Versions

• Material-UI: 0.16.0
• React: 15.3.2
• Browser: Chrome/Firefox/Safari

[jmansor]

Found the same problem. Not sure if this is a bug or it is by design, as Material Design suggests limiting nesting one level deep.

https://material.google.com/components/menus.html#menus-menu-items

Menu nesting

Menu items can reveal nested submenus. Ideally, limit nesting to one level deep, as it can be difficult to navigate multiple nested submenus.

This also happens when using a regular Menu, as soon as you reach the second level in Main Menu > First Level (popover) > Second Level (popover) and click a MenuItem, it makes the First Level disappear and closes the whole thing.

Doesn't seem possible at all to nest more than one level in IconMenu and more that two levels in Menu.

[ffrizzo]

@jmansor yes I saw that. But it says "Ideally, limit nesting to one level deep". So I believe we can have a second/third level, of course this is not recommended but in some cases this can be necessary

[jeffshaver]

I believe this and #4887 are related

[mbrookes]

Dupe of #4887