Angular Material 6 Disable Ripple on Checkbox and Radio button
I've got a situation where there are radio buttons up against the edge of a container that is nested several levels deep, with overflow auto. The Angular matererial radio button has the ripple effect, which gets clipped. Rather than reworking the whole thing, I was going to turn off the ripple, with disableRipple. This works for click, but does not seem to work when tabbing between components, as illustrated in this stackblitz and as shown in the screenshot below, where I tabbed to, rather than clicked, Option 1 on top. I tried updating the css to display: none, but then there's no visual cue, at all, when the focus changes. It seems to me the ripple effect should an overlay to avoid clipping problems, but that's not how it works. So is there a way to turn it off for both tab and click?
Although it is the ripple element that is "rippling" when you keyboard to the radio button, technically it's more of a focus/touch indicator than a click-ripple. Without it you can't tell where your focus is. The radio button click itself doesn't have that problem because it gets filled in so there is a visual indication of the change. I can't see any way around this other than overriding the div.mat-ripple-element background-color property. I'm not sure I'd personally want to do that because of the impact on focus indication. Do you really need to hide the overflow? Why not use overflow: visible?