[List] Improve ListItemSecondaryAction handling

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

ListItem should consistently either render a <li> or not render a <li>

Current Behavior

When adding a ListItemSecondaryAction into the ListItem a <li> is automatically added. If I render a list where some items should have an icon and some do not, this element structure becomes inconsistent.

Steps to Reproduce

Link: https://codesandbox.io/s/20w105myyy

1. Open Browser DevTools and inspect the DOM structure or the children to the <ul>s.

Context

I’m trying to make a generic ListItemLink helper that wraps the content inside a ListItem and a NavLink like this:

class ListItemLink extends Component {
  render() {
    const { classes, to, children } = this.props;

    return (
      <ListItem button component={NavLink} to={to} activeClassName={classes.active}>
        {children}
      </ListItem>
    );
  }
}

But since I use component property I override the default use of <li>, however, when adding the ListItemSecondaryAction inside of it a <li> is added. I assume that this is somehow related to #10452, but cannot understand how to fix it. Is this a bug? If not, how can I work aroun this issue when I do not know beforehand if the content will contain a ListItemSecondaryAction?

Your Environment

Tech	Version
Material-UI	v3.4.0
React	v16.6
React Router	4.3.1

[tregusti]

That is exactly my problem, hence the reason I opened the issue…

If I loop a bunch of items that will contain the information that renders the links. Sometimes I should manually add the <li> and sometimes not, and that is my problem.

As I see it, ListItem should either always add a <li> or never do it. “Sometimes” it not really something that is easy to handle as a consumer of an API.

It the following code, the generated markup will become non-semantic, since <li> will sometimes be present and sometimes not.

<nav>
	<List>
		{ items.map(item => (
			<ListItem ...>
				{/*
					content based of `item`.
					sometimes with and sometimes without secondary action
				*/}
			</ListItem>
		))}
	</List>
</nav>

If what you suggest is how to do it, then I should take into account how internal code in material-ui looks/works instead of assuming it is consistent. So if this is not a bug, then I would either like a property available telling me if a <li> will be automatically added or not so that I can add it myself. I should NOT check for the presence of ListItemSecondaryAction because that is how the internal code in the lib currently works.

So please reconsider closing this. Or at least let some mor eyes see it before closing it.

[ryancogswell]

@tregusti When a ListItemSecondaryAction is in the ListItem, the component gets wrapped by the ContainerComponent. This defaults to li, but it is another property that you can control. So, for instance, you could specify ContainerComponent to be div instead of li (e.g. <ListItem component={NavLink} ContainerComponent="div">) and then know that you can safely wrap all your list items in li without resulting in nested lis.

You can specify this ContainerComponent unconditionally (without needing to know whether or not your ListItem contains a ListItemSecondaryAction) because it will be ignored except in the case where a ListItemSecondaryAction is detected.