Checkbox ripple causes generation of invalid hitbox

[harmony7]

Problem description

Once a checkbox is clicked, the space occupied by the ripple animation turns into a new hitbox that will trigger additional ripples but will not affect the value of the checkbox.

Steps to reproduce

This can be seen on http://www.material-ui.com/#/components/checkbox

Hover the mouse a few pixels to the left of the first checkbox labeled "Simple". Move the mouse over to the checkbox. Note that the cursor turns into a hand as it comes in contact with the checkbox.

Now click, and you will see the ripple animation. Note the size of the ripple. Now, move the mouse a few more pixels to the left and you will notice that the mouse cursor will stay as the hand at a greater distance away from the checkbox --- all the way up to the size of the ripple.
Click within this area, inside the box caused by the ripple but outside the checkbox itself. You will see additional ripples being generated, but the state of the checkbox is not affected.

This also happens on mobile devices. You are able to touch the area outside the checkbox once the ripple is generated, to trigger further ripple animations that don't affect the checkbox state.

Since the ripples are supposed to be confirmation of touch, this is confusing and gives the illusion of checkboxes sometimes not being responsive. In my use case I have chosen to disable the ripples for now as a workaround.

Versions

• Material-UI: 0.16 (or whatever is used on the material-ui demo site)
• React: 15 (or whatever is used on the material-ui demo site)
• Browser: Safari/Chrome for Mac, Safari/Chrome for iOS, Edge for Windows

[oliviertassinari]

I confirm the issue:

I have dug into it using #5191 as a starting point.
Implementing a proper fix would require changing quite some stuff.
It turns out, that issue was solved by @nathanmarks on the next branch:

I'm closing the issue, I don't think it worth spending more time on it.