Skip to content

ListItemSecondaryAction in MenuItem makes <li> inside <li> #10452

@fmy

Description

@fmy

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

  • 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

Metadata

Metadata

Labels

scope: listChanges related to the listtype: new featureExpand the scope of the product to solve a new problem.

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions