Ripple effect doesn't go away on flat buttons

[matthewoates]

This issue has been around for quite a while, and I just reproduced it in 0.14.4 and 0.15.1-alpha.1. I looked through all "button" and "ripple" related issues and found no mention of this, so apologies if this is a duplicate.

https://dl.dropboxusercontent.com/u/19969663/ripple_issue.mov
As you can see, this is the latest version of the demos on material-ui.com. Video was taken in chrome on a mac.

Basically, through some sequence of clicks the ripple effect doesn't go away. I've been playing around with it for quite a while and couldn't find consistent repro steps. It also seems to happen much more often on chrome in android as well as safari in iOS. I've noticed this issue in all browsers.

[mbrookes]

@matthewoates
In order for us to better help you, please use the issue template that is populated by default, and follow the issue guidelines in the Contributing guide that was linked to when you started to open an issues.

All that said, what's the issue here? Repeated clicking leads to repeated ripples? Seems kind of natural to me, but I'd be interested to hear what others think. Not sure it's a scenario the guidelines cover - do you have a link?

[nakleiderer]

The behavior shown in the video is, in my opinion and based on other material design libraries, completely expected. The ripple effect has a transparent layer to maintain the visual styles of the button while the animation occurs. Stopping an animation mid-transition would be visually unappealing. For reference https://material.angularjs.org/latest/demo/button has the same behavior. Angular Material is a first party implementation of the Material Design spec, so I would expect it to be a good reference.

Cheers!

Update: I viewed the video again, and now I see the potential issue. Look at about the 15 second mark and you will see the button's animation freeze. I'm still not convinced that it is a bug though. A glance at Angular Material's button behavior shows that the button is shaded to indicate focus for ARIA support. To test this, try pressing tab and see if the shadow moves to another element.

[mbrookes]

@nakleiderer Thanks, now I see what @matthewoates was getting at - looks like hover state is getting stuck. I can't reproduce it though.

[nakleiderer]

It might be a browser or platform specific issue.

[matthewoates]

Hello all, and thanks for the quick replies.

The video is ~30 seconds long, so you'll need to wait until the end to see the issue. In my first comment I mentioned that this issue happened in chrome on a mac (more specifically, 49.0.2623.110), and I have also reproduced it in all major browsers on multiple devices, including mobile.

The issue (as reported in the title) is that the ripple effect doesn't go away in some cases.

@nakleiderer How is this not a bug? In some cases, multiple clicks and then mouse out don't preserve the ripple effect, and in some cases is does. It's inconsistent.

[nakleiderer]

@matthewoates I missed that information when I first read you comment, apologies. I haven't dug into the code, so I can't speak with any conviction, but the only thing I can think of that would make this not a bug is:

the button is shaded to indicate focus for ARIA support. To test this, try pressing tab and see if the shadow moves to another element.

[matthewoates]

@nakleiderer : That's a good hunch, but I'm able to have the ripple persist on multiple buttons. Wouldn't that be impossible if this was related to keyboard/aria focus?

see:

The ripple effect persists on the "DEFAULT" and "PRIMARY" buttons. The effect is darker on "DEFAULT", so perhaps there are two ripple effects that persist. NOTE: My mouse is not hovering over any of the buttons in this screenshot.

[nakleiderer]

Yep, you're correct about the focus. Seems as though you nailed where the issue is.

I wish I could repro. I tried on Chrome for Windows v50.0.2661.94 m and Chrome for Android v50.0.2661.89 on Android 6.0.1 Build MHC19Q (Nexus 6P).

[paramsinghvc]

Whats the solution people? I've got the same issue.

[deepfriedbrain]

I'm seeing this too frequently in my application. I can reproduce it with just with 2 or 3 clicks on a button without repeated clicks as in the video. I tested it on Chrome 49x on Mac OSX 10.11.5 and Chrome on iPhone 6s+ (iOS 9.3.3). MUI 0.15.3.

[jlichti]

Seeing this same issue and reproduces very easy but not every time. It's most common on mobile for me.

[malonehedges]

Coming to report that I'm getting the same issue very easily with iOS Safari.

[oliviertassinari]

We have been porting the component on the next branch. We reimplemented it from the ground-up. While we haven't tested it, I think that the issue is most likely fixed on that branch. Hence, I'm closing it.

[michaelforrest]

When I remembered to include this code this stopped happening.

import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

[wentsa]

Issue still occurring in v0.20.0. injectTapEventPlugin did not help. The only workaround I have discovered is to inject

ripple: {
    color: 'transparent',
}

into custom theme and pass disableTouchRipple prop to every RaisedButton and FlatButton. (prop is applied to buttons and theme property to SelectField for example)