Touch ripples are triggered 2 times

[majodev]

Looks like touches trigger 2 touch ripple animations: instantly and then with a 300ms delay again. Easily reproducible by visiting the documentation page with an iOS device: http://material-ui.com/#/components/buttons

I'm not sure if Android devices are also affected. Any available workaround for this?

[majodev]

Might be connected to zilverline/react-tap-event-plugin#14

[mbrookes]

Second this. And further: onClick action only fire with the second ripple, so effectively the 300ms delay is present.

Related(ish): on desktop, even though the ripple only fires once per click, and the onClick action fires straight away, rapidly clicking twice (or more) will trigger the ripple appropriately, but the second onClick action is being lost.

Edit: I needed to use onTouchTap, not onClick - solves the 300ms delay on mobile (event fires on first ripple not second), and also stops events getting dropped on desktop.

Still seeing the double ripple on iOS though per @majodev's originally reported issue.

[ka2n]

It seems TouchRippe cancels animation when onMouseDown event If other animation was already started by onTouchStart. But in this case, onMouseDown event is fired after onTouchEnd, so it will not be cancelled.

https://github.com/callemall/material-ui/blob/a016c6d850e7d19c652b74d8927e73ae29352058/src/ripples/touch-ripple.jsx#L79

[onchainguy-btc]

Any update on this?

[majodev]

I'm currently "preventing" it by refusing the _handleMouseDown(e) handler to execute while running in a touch environment (cordova) (see https://github.com/callemall/material-ui/blob/master/src/ripples/touch-ripple.jsx#L111). However, this might have some serious side effects...

[onchainguy-btc]

Ah, yeah this seems to work. Thanks!

[preco21]

Same issue +1

And still double rippled in Chrome 45.0.2454.89, IOS 9.
Test with: http://material-ui.com/#/components/buttons

[mbrookes]

Not just iOS - also seeing this on Android in Chrome and Cordova/crosswalk.

[oliviertassinari]

I have the same result using the touch device emulator of Chrome. I think that we are listening to two different events, those two events fire on a touch device and only one fire on a desktop.

[mbrookes]

@ka2n pointed to the cause in an earlier comment.

[oliviertassinari]

We have just merged a PR of @owencm to fix this issue (#2216)

[owencm]

\o/

Can someone mark this issue as fixed in that case?