bug(material/radio): Focus styling remains applied after mouseup

[RobinKamps]

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

sadly, the material radiobutton stays focused after being selected.
This could be intended by the material specs - #14290
But other material components like checkbox or inputs does not have this behavior.
The material specs ( https://material.io/components/selection-controls#radio-buttons ) mention a "Pressed Focus" state - but the animation does show a different behavior after click: https://kstatic.googleusercontent.com/files/bed79fcf6804cded983c22cde6ee42734fce03e47589c4f3d4338405c67cd0b7e28a30c4fbcf9eea0403fb2e8846c4264d432451a31eb7bd364e94d30b1e77d2

perhaps the behavior to keep a "pressed focused" state or to remove focus (and defocus just like all other elements/checkboxes) could be made optional.

Reproduction

Steps to reproduce:
head to https://material.angular.io/components/radio/examples and click a radio button

Expected Behavior

the focus / animation / big transparent ripple circle should disappear

Actual Behavior

the focus / animation / big transparent ripple circle does not disappear

Environment

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

[amysorto]

Seems like the focus styling being persistent starts in v11 since it doesn't happen on the docs site for v10: https://v10.material.angular.io/components/radio/examples.

[crisbeto]

Related issue that'll be resolved when this one is (with some small changes in the checkbox): #18912.

[RobinKamps]

Thank you very much for pointing to the related issue.
Quick fix if needed:

.mat-radio-persistent-ripple {
  .mat-radio-button.cdk-focused:not(:hover) & {
    opacity: 0 !important;
  }
  .mat-radio-button.cdk-focused:hover & {
    opacity: 0.06 !important;
  }
}