[List] Fix clicking "Toggle Nested Items" icon triggering left checkbox toggle

[hwo411]

• IOS safari is affected (tested on iPad Mini 2i & iOS 10.3.2)
• Can't reproduce on Android/Windows mobile/desktop browsers

So the issue appears to be only under iOS safari.

The simple code snippet to reproduce:

import React from 'react'
import ReactDOM from 'react-dom'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import { List, ListItem } from 'material-ui/List'
import Checkbox from 'material-ui/Checkbox'
import injectTapEventPlugin from 'react-tap-event-plugin';

function onload() {
  injectTapEventPlugin();
  ReactDOM.render(
    (
      <MuiThemeProvider>
        <List>
          <ListItem primaryText="root" leftCheckbox={<Checkbox/>} nestedItems={
            [
              <ListItem primaryText="child1" />,
              <ListItem primaryText="child2" />
            ]
          } />
        </List>
      </MuiThemeProvider>
    ),
    document.body
  )
}

document.addEventListener('DOMContentLoaded', onload, false);

It might be injectTapEventPlugin or browser issue, but the result is that component doesn't work correctly and adding preventDefault seems to fix it.

Screenshots:
Win10/Chrome

Android/Chrome

iOS/Safari

[oliviertassinari]

@hwo411 Thanks