Cannot use wrapper for ListItemSecondaryAction

[stefan-dimitrov]

• This is a v1.x issue (v0.x is no longer maintained).
• I have searched the issues of this repository and believe that this is not a duplicate.

Similar to #11231

Expected Behavior

• When using a wrapper component of the ListItemSecondaryAction in the list item:

  When hovering over the list item body, the whole list item is highlighted:
  

  When hovering over the button(secondary action), only the button is highlighted:
  

  When clicking the button(secondary action), only the button receives the click event.

Current Behavior

When hovering over the button(secondary action), both the list item and the button are highlighted:

When clicking the button(secondary action), both the list item and the button receive the click event.

Steps to Reproduce (for bugs)

1. Go to https://codesandbox.io/s/3xy267156p
2. Hover over the button on the right of the list item, click it. You notice how both the button and the list item are highlighted on hover and when clicked both display the ripple effect, indicating they have both received the click event.
   • If you replace the usage of SecondaryActionWrapper with the ListItemSecondaryAction(demo.js), all should work normally as in the official demo: https://codesandbox.io/s/006wj9mnkn

Context

Your Environment

Tech	Version
Material-UI	v1.1.0
React	v16.4.0
browser	Firefox 60.0.1, Chromium 66.0.3359.181, Chrome 66.0.3359.181

[oliviertassinari]

Following the documentation, this fix the issue :)

// Wrapper of ListItemSecondaryAction
const SecondaryActionWrapper = ({ ...props  }) => <ListItemSecondaryAction {...props} />

+SecondaryActionWrapper.muiName = "ListItemSecondaryAction";

[stefan-dimitrov]

That works, thank you @oliviertassinari !

[montiquewillis]

@oliviertassinari Hello, I'm new to using react and not understanding the solution. I'm running into this same issue after following the documentation.Props are defined on the parent component. Is this the correct approach? I'm still unable to click the secondary action without triggering the link.

render(){
     const SecondaryActionWrapper = ({ ...props  }) => <ListItemSecondaryAction {...props} />
      SecondaryActionWrapper.muiName = "ListItemSecondaryAction";
     return(
          <ListItem dense button component={this.renderLink}>
                  <ListItemText inset style= {{fontSize: 12}} primary={data.title}/>
                  {icon && <SecondaryActionWrapper>{icon}</SecondaryActionWrapper>}
           </ListItem>
 )
}

[oliviertassinari]

@montiquewillis It should be working. If you have a live reproduction example, on Codesandbox for instance, you can open a new issue.