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

vkolon01 commented 2 years ago

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

petebacondarwin commented 2 years ago

We have transferred this issue to the components repo, since this appear to be a problem with a directive defined here.

crisbeto commented 2 years ago

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.

iErKy commented 2 years ago

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?

vkolon01 commented 2 years ago

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

iErKy commented 2 years ago

@vkolon01 Thanks for the answer, i will try to remove the fix we made for this issue.

sergidt commented 2 years ago

I am using the lastest version (14.1.2), and is still happening!

vkolon01 commented 2 years ago

@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.

iErKy commented 1 year ago

Any news regarding this issue? It's still happening on angular 14.2.0

Nurech commented 1 year ago

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>

knuckifyoubuck commented 1 year ago

Any updates regarding this issue ? Trying to resolve it by custom styles and no result

angular / components