Material-ui: ListItemSecondaryAction in MenuItem makes <li> inside <li>

[fmy]

ListItemSecondaryAction in MenuItem cause Warning: validateDOMNesting(...): <li> cannot appear as a descendant of <li>.

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

Expected Behavior

inside component should be div.

Current Behavior

inside component becomes li.

Steps to Reproduce (for bugs)

https://codesandbox.io/s/2z43ov89vn

Context

ListItem has component and ContainerComponent props, but MenuItem has only component props.
To fix this warning, remove component defaultProps and add ContainerComponent defaultProps as li in MenuItem and pass it to ListItem (keep same props between these component).
Or, pass MenuItem's component props to ListItem as ContainerComponent.
related pr #10050

If you want, I will send pr to fix this.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | next(1.0.0-beta.35) |
| React | latest(16.2.0) |
| browser | any |
| etc | |

[oliviertassinari]

@fmy The issue comes from the fact that the MenuItem is asking his children to render as a li.
The ListItem is answering this requirement. But at the same time, the ListItemSecondaryAction usage requires the use of a wrapping li element. Hence li > li.

Workaround:

      <List>
-       <MenuItem>
+       <MenuItem component="div">
          <ListItemText primary="Inbox" />
          <ListItemSecondaryAction>
            <IconButton>
              <InboxIcon />
            </IconButton>
          </ListItemSecondaryAction>
        </MenuItem>
      </List>

We could look into improving the logic to prevent it in the first place.
Maybe:

Component = ContainerComponent === 'li' && Component === 'li' ? 'div' : Component;

Instead of:
https://github.com/mui-org/material-ui/blob/8898a8da3e29fbbeea514fd81123392da2afb8ea/src/List/ListItem.js#L116

[fmy]

@oliviertassinari Thanks, I will use this workaround.
This is just my opinion but I think MenuItem's component props should have same meaning with ListItem's one because they are inheritance relation.

[oliviertassinari]

What make you think they don't have the same meaning? I think they do. The tricky part is the wrapping element that gets added for not nesting the buttons. Remove the MenuItem and you will get the same issue.