Ripples not being allowed to complete.

[tranrate]

What MDC-Web Version are you using?

0.7.0

What browser(s) is this bug affecting?

Chrome Version 57.0.2987.110 (32-bit)
Firefox 52.0.1 (64-bit)

What OS are you using?

Windows 10

What are the steps to reproduce the bug?

On your Demo site, go to the Dialog demo (for example) and open a Dialog. Right Click over either Button and the Ripple will occur. However if you (Left) Click the Dialog will simple close before you can see the Ripple.

What is the expected behavior?

Paraphrasing the Material Design website - Ripples and other animations are supposed to keep the user amused while the App chugs away preparing the next Screen.

What is the actual behavior?

The user is not "Amused" :-)

Any other information you believe would be useful?

The Ripple needs a Custom Event that is fired when its completed. Controls such as the Dialog need to be made "Ripple Aware" and wait for the Ripple to Complete before starting their Close sequence. The Snackbar, Menu, and Select controls need to work similarly if they incorporate Ripples. Possibly also need an option to turn off (or speed up) Ripples in the standard controls to allow for a snappier response.

[amsheehan]

To accommodate this behavior, we would need to change the components you listed, and MDC Ripple.

Lets leave this open as a discussion so we can talk to designers, and discuss how best to implement a solution for our existing components (and future components).

At first glance this would probably include changes to the Ripple to fire an event at the end of its animation, a flag on each component to correspond to the end of an animation, and some logic that checks the flag before starting the components close sequence.

Thoughts?

[tranrate]

Yes I agree you need to talk to the designers. My understanding of it is -
The first phase (the activation) is to indicate which Component you're touching. This is useful particularly on Touch Screens for those of us with large fingers. It corresponds to the focused using the keyboard.
The second phase (the deactivation) is to confirm that you've successfully clicked (or tapped) the component (and the right one) and the application is now processing this. I found the use of Deactivation slightly confusing initially as it's actually activating the application and the ripple effect. But I can see why you called it deactivation.
However I may be reading too much into this and would be interested to hear the designers view on it.

[amsheehan]

We landed #419 recently, so stay tuned for improved ripple response guidelines. Leaving this open for further discussion.

[traviskaufman]

Since there's been no discussion here for 28 days, closing.