[DropDownMenu, SelectField] Unable to put nested Menus inside of a DropDownMenu

[jeffshaver]

Problem description

I want to have a DropDownMenu where top level items items that actually open up a submenu (passing in the menuItems prop to a MenuItem that is the child of DropDownMenu.

There are a few issues with this (as far as I can tell).

1. Currently, even if the top level items have nested items, the handleItemTouchTap method closes the menu (sets open to false).
   • One possible solution to this would be to check to see if the child passed into handleItemTouchTap (in DropDownMenu.js) has the menuItems prop and its length is > 0. If so, don't change the state or call the onChange callback
2. With 1 fixed, the problem is that sub-menu items don't get the handleItemTouchTap method so clicking on them wont close the menu
   • This seems to require recursive child cloning instead of just cloning the top level menu items which happens in cloneMenuItem (in Menu.js)
3. Auto width wont work anymore (since it should be based on the width of all possible menuItem widths instead of just the first level -- honestly this is not as big of a concern as the 1 and 2.
4. This will cause an issue with default-values. Since the items with sub-items don't have values, this causes the DropDownMenu to be really small and have no text in it.
   • Seems like one solution here would be to have hintText similar to all input fields in Material-UI

Steps to reproduce

Make a DropDownMenu and provide one of its MenuItems with the menuItems prop

<DropDownMenu
  value={someItemValue}
>
  <MenuItem
    menuItems=[<MenuItem primaryText={'SubMenuItem'} value={'SubMenuItem'} />
    primaryText={'MenuItem'}
    rightIcon={<ArrowDropRight />}
  />
</DropDownMenu>

Versions

• Material-UI: 0.15.2
• React: 15.3.0
• Browser: Chrome 51.0.2704.103 m

[jeffshaver]

This is problem for my team, but it is also a spec issue. https://material.google.com/components/menus.html#menus-usage under the "Cascading Menus" heading. I have been looking around the source code and can't really get it "working" without getting a bunch of setState on unmounted component for Popover. Would be glad to do the PR if someone could provide some direction.

[jeffshaver]

can anyone respond to this. this is becoming a big issue for my project. would gladly put in a pr if someone can provide some guidance? have tried several options but they all result in setState on unmounted component warnings.

[jampy]

anyone know a workaround?

[abhisheknalin]

I used ant design dropdown component. It supports nested menus. Although design is not material design.
https://ant.design/components/dropdown/#

[oliviertassinari]

We have been porting the component on the v1-beta branch. We reimplemented it from the ground-up. While we haven't tested it, I think that the issue is most likely fixed on that branch. Hence, I'm closing it.
Still, we will accept PR fixes until v1-beta takes over the master branch.