Button in a ListItem with button=true

[phbernard]

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

Expected Behavior

When a ListItem has its button attribute set to true, it shows no highlighting, which is normal:

When the mouse cursor is dragged on the ListItem, the later is highlighted, as expected:

When the mouse cursor is on a Button embedded in the ListItem, I would expect the button to be highligthed, but not the ListItem, as follow:

Current Behavior

Instead, both components are highlighted:

In addition, when clicking the Button, a wave effect is triggered on the ListItem, giving the impression that the ListItem was clicked:

Although that can be true (both components can receive and process the click event), stopPropagation() will probably be used in the Button handler to prevent the click from being processed two times. Thus, the UI feedback is not accurate in this scenario.

Steps to Reproduce (for bugs)

1. Go to https://codesandbox.io/s/wy6kvr7827
2. Open the DevTools of your browser (to see the console, because this example is using console.log)
3. Click the "Click here" button. You notice that only the Button handler is triggered, thanks to stopPropagation(). Yet, the wave effect is applied to the ListItem.

Context

This behavior can send the wrong signal to the user, making him believe that "two" clicks happen when he clicks a button in a list item.

Two approaches to improve the situation:

• Do not display the wave effect on click on an embedded button (but keep the highlighting of the ListItem when the mouse cursor is on the embedded button)
• Display neither the wave effect nor the highlighting when the mouse cursor is on the embedded button.

Your Environment

Tech	Version
Material-UI	1.0.0-beta.43
React	15.6.2
browser	Chrome and FF
etc

[oliviertassinari]

@phbernard Do you have a reproduction example? At first sight, the root of the issue comes from your example nesting two buttons, it's an invalid HTML5 structure, to be verified.

[phbernard]

The example is https://codesandbox.io/s/wy6kvr7827

Hum... I get your point. You are right, as mentioned in the docs, a ListItem with button to true becomes a ButtonBase. As the ListItem is technically a button, it doesn't make much sense to embed another button in it.

Now I need to figure out how I want to implement the behavior I have in mind without resorting to the button property.

Thanks for the tip and sorry for bothering!

[oliviertassinari]

Maybe you can use the ListItemSecondaryAction component. We have a demo demonstrating the usage of two buttons withing the same item.