Angular Material Radio button - Ripple effect persists until clicking away.

Which @angular/* package(s) are the source of the bug?

Don’t known / other

Is this a regression?

Yes

Description

Clicking on a radio button now persists the ripple effect. This issue seems to have appeared since Angular 11 and still exists in Angular 12. This bug can be seen in angular material documentation.

Angular 10. No persistent ripple. https://v10.material.angular.io/components/radio/overview

Angular 11. Persistent ripple issue which clears after clicking somewhere on the screen https://v11.material.angular.io/components/radio/overview

Although not perfect I’ve added the following css to hide the bug as a workaround.

.mat-radio-button:not(.mat-radio-disabled).cdk-program-focused .mat-radio-persistent-ripple { opacity: 0; }

I couldn’t find a ticket regarding this issue so thought it’s worth raising one.

Please provide a link to a minimal reproduction of the bug

https://v11.material.angular.io/components/radio/overview

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in

No response

Anything else?

No response

[vkolon01]

Hello, im having the same issue when clicking on a mat-button, due to cdk-program-focused background color changes until focus is lost from the component which contains the mat-button.

Any news regarding this issue?

It looks like this issue has been fixed in Angular 14 https://v14.material.angular.io/components/radio/overview

[crisbeto]

This is likely caused by https://github.com/angular/components/pull/16512. There is even a discussion on the PR about an identical issue. I don’t think that we can revert the fix since it resolves an accessibility issue.