Material-ui: [ListItem] rightIconButton in ListItem can not prevented

[abellee]

just like what i say,
i put a iconbutton on the right of the ListItem,
but it seems can't be prevented,
the ListItem also be clicked.
I tried to put the MoreVertIcon just like the example,
but no IconMenu,
also can not work.
I didn't try the IconMenu,
I can't sure whether the IconMenu could prevent default only?
then whether the right icon button could be set to middle on vertical direction?
and the right icon could use FlatButton? Cause I wanna show the text and icon together.

[oliviertassinari]

Do you have some code example so we can reproduce this issue?
Are you using the latest release of Material-UI?

[abellee]

<div className="profile_cell white_bg my_orders">
                    <div className="title_label pull-left">
                        My Orders
                    </div>
                    <FlatButton
                        label="All Orders"
                        icon={ <FontIcon className="material-icons keyboard_arrow_right" /> }
                        className="pull-right"
                        style={{ color: Colors.grey400 }} />
                    <Clearfix />
                </div>

here is the code. you could try it, if you add labelStyle then change the css just like padding-right, it doesn't work but if you set the labelPosition to after.

[oliviertassinari]

How is this related to a <ListItem />?

[abellee]

oh, sorry!
I've already changed it.
I can't use the ListItem with the FlatButton on the rightIconButton,
I need to use icon and label together on the right side.
So i didn't use the List of material-ui, I just created it by myself with normal dom.

[kd35a]

Expected behavior

What the docs say:

The event will be stopped and prevented from bubbling up to cause a ListItem click.

What happens

Both event handlers get the event

How to reproduce the problem

Here is a minimal example showing the problem: https://gist.github.com/kd35a/93abbe29a72ca27b7d8102c0255a1005

The following patch does not fix the issue:

diff --git a/mui-3113.jsx b/mui-3113.jsx
index 0b096ef..4f3d827 100644
--- a/mui-3113.jsx
+++ b/mui-3113.jsx
@@ -11,6 +11,7 @@ class Mui3113 extends React.Component {
     }

     handleRightIconClick = (e) => {
+        e.preventDefault();
         console.log("handleRightIconClick");
     }

Environment

• Chrome 50.0
• React 0.14.7
• Material-UI 0.14.4

[kd35a]

This patch seems to work though:

diff --git a/mui-3113.jsx b/mui-3113.jsx
index 0b096ef..2a91006 100644
--- a/mui-3113.jsx
+++ b/mui-3113.jsx
@@ -18,9 +18,9 @@ class Mui3113 extends React.Component {
         return (
             <List>
                 <ListItem
-                    onClick={this.handleItemClick}
+                    onTouchTap={this.handleItemClick}
                     rightIconButton={
-                            <IconButton onClick={this.handleRightIconClick}>
+                            <IconButton onTouchTap={this.handleRightIconClick}>
                                 <AccessTime />
                             </IconButton>
                         }>

So maybe this issue should be closed?

[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.