[ListItem] handleNestedListToggle causes ghost clicks on mobile

[max-b]

Problem description

On mobile devices, clicking on a ListItem with nestedItems causes a ghost click.

In order to reproduce, go to the webpackbin link below on desktop, open chrome developer tools, and toggle the "device toolbar" so that you can emulate a mobile device.

In the demo container, click the "Outer List Item 0" list item to expand it. Then scroll to the bottom of the demo container and click the "Outer List Item 4" List Item to expand that list. Then scroll to the bottom of the demo container again (important) and then click on the "Outer List Item 4" list item again. It will cause the "Outer List Item 4" list to contract, but it will also cause a click on whatever element ends up behind your mouse cursor.

Link to minimal working code that reproduces the issue

https://www.webpackbin.com/bins/-KkrTIYBI9T2XNYU10AG

Versions

• Material-UI:master
• React:15.4.2
• Browser:Any mobile

I believe that the issue is this line:
https://github.com/callemall/material-ui/blob/master/src/List/ListItem.js#L463

I think that because of the onTouchTap behavior, that function should include an event.preventDefault() to prevent the ghost click. Making that change worked for me.

[max-b]

As of #7105, ListItem exposes an onTouchTap API. Therefore it should be possible to add the `event.preventDefault() in the user code if/when appropriate.