search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.74k stars 32.24k forks source link

Touch ripples are triggered 2 times #1563

Closed majodev closed 8 years ago

majodev commented 9 years ago

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 commented 9 years ago

Might be connected to https://github.com/zilverline/react-tap-event-plugin/issues/14

mbrookes commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

Any update on this?

majodev commented 9 years ago

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 commented 9 years ago

Ah, yeah this seems to work. Thanks!

preco21 commented 9 years ago

Same issue +1

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

mbrookes commented 9 years ago

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

oliviertassinari commented 9 years ago

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 commented 9 years ago

@ka2n pointed to the cause in an earlier comment.

oliviertassinari commented 8 years ago

We have just merged a PR of @owencm to fix this issue (https://github.com/callemall/material-ui/pull/2216)

owencm commented 8 years ago

\o/

Can someone mark this issue as fixed in that case?