bug(matRipple): Ripple effect sometimes persists when used with cdkDrag

[gkrzysztofbury]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

When setting up cdkDrag with multiple cdkDropList components, initiating a drag very quickly can cause the ripple effect to remain frozen on the component.

Reproduction

• Video: YouTube
• StackBlitz: Example

Expected Behavior

After the drag ends, the ripple effect should be removed from the button.

Actual Behavior

The ripple effect remains on the button indefinitely.

Cause:

When the drag starts, the original button is removed from the DOM, and a placeholder is created in its place. Immediately after creation, the ripple state is set to RippleState.FADING_IN (source). However, the actual FADING_IN transition does not occur because the button is removed from the DOM.

Proposed Solution:

Modify the code at line 184 to set the state to RippleState.VISIBLE, and then set it to RippleState.FADING_IN on the transitionstart event. This way, the ripple will be removed here:
Remove Ripple

Environment

• Angular:
• CDK/Material:
• Browser(s):
• Operating System (e.g. Windows, macOS, Ubuntu):

[gkrzysztofbury]

This fix doesn't work, the problem is that mat-ripple-element stays inside the original element, not placeholder/preview

[crisbeto]

I just tried it and couldn't reproduce this issue with the code at head:

Screen.Recording.2024-06-05.at.10.12.32.mov

[gkrzysztofbury]

You have to:

1. have a setup with 2 connected cdkDragLists
2. click & drag very fast, like in single move, so the drag starts before ripple animation starts playing

[crisbeto]

I tried it again, but couldn't reproduce it. I also tried slowing down the animation to see if that makes a difference, but it didn't. Can you try it on this link? https://ng-dev-previews-comp--pr-angular-components-29197-dev-p8hzqfu4.web.app/drag-drop

It's our demo app with your repro pasted in.

[gkrzysztofbury]

Screen.recording.2024-06-05.12.54.30.webm

Here you go, it takes some practice to do this quick move, but once you get it is easy to reproduce