components
components copied to clipboard
angular
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
We have transferred this issue to the components repo, since this appear to be a problem with a directive defined here.
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.
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?
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
@vkolon01 Thanks for the answer, i will try to remove the fix we made for this issue.
@vkolon01 Thanks for the answer, i will try to remove the fix we made for this issue.
Hmm. I've only tested the example given by the angular website before coming to a conclusion it was fixed. I tried removing our workaround today on our project and it is infact still an issue! I'll look into it again later.
I am not entirely sure if this links to the problem, but I observed the same behavior of persistent ripple staying after action. In my case I was working on developing dark/light mode theme switching using a custom $mat-theme and in the process I wanted to make the transition smooth by using CSS transition which caused the effect.
styles.css
.animate-colors-transition * {
transition: color 0.3s, background 0.3s;
}
index.html
<body class="mat-typography animate-colors-transition">
<app-root></app-root>
<noscript>Please enable JavaScript to continue using this application.</noscript>
</body>
Any updates regarding this issue ? Trying to resolve it by custom styles and no result
