components: Global Disable Ripple Does Not Affect Keyboard Focus
Bug, feature request, or proposal:
Bug.
What is the expected behavior?
When you set disabled: true
using RippleGlobalOptions
, the ripple should disappear completely, no matter if the focus arrives through tab key on keyboard or through mouse click.
What is the current behavior?
After setting disabled: true
using RippleGlobalOptions
, the ripple effect still appears when the focus arrives through tab key.
What are the steps to reproduce?
Here is a simple plunker containing two checkboxes: https://plnkr.co/edit/7aqtkq?p=preview
You can see that ripple effect is disabled globally. When you click any checkbox with mouse, the ripple effect does not appear, as expected. However, when you select any checkbox using tab key, the ripple effect still appears.
What is the use-case or motivation for changing an existing behavior?
I guess that when you disable ripple effect, you want to disable it completely.
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Angular 4, latest version of Material, Windows, browsers Google Chrome, Internet Explorer.
Is there anything else we should know?
One can get rid of the ripple effect completely using css .mat-checkbox-ripple { display: none; }
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Comments: 15 (8 by maintainers)
Commits related to this issue
- docs: show additional interfaces * Shows additional interfaces in the Dgeni API documentation * Adds documentation for the `RippleGlobalOptions` Closes #8298. — committed to devversion/material2 by devversion 7 years ago
- docs: show additional interfaces * Shows additional interfaces in the Dgeni API documentation * Adds documentation for the `RippleGlobalOptions` Closes #8298. — committed to devversion/material2 by devversion 7 years ago
- docs: show additional interfaces * Shows additional interfaces in the Dgeni API documentation * Adds documentation for the `RippleGlobalOptions` Closes #8298. — committed to devversion/material2 by devversion 7 years ago
- docs: show additional interfaces * Shows additional interfaces in the Dgeni API documentation * Adds documentation for the `RippleGlobalOptions` Closes #8298. — committed to devversion/material2 by devversion 7 years ago
- docs: show additional interfaces * Shows additional interfaces in the Dgeni API documentation * Adds documentation for the `RippleGlobalOptions` Closes #8298. — committed to devversion/material2 by devversion 7 years ago
- docs: show interfaces (#8376) Also adds documentation for the `RippleGlobalOptions` Closes #8298 — committed to angular/components by devversion 7 years ago
You are a hero @DevVersion don’t let it go to your head though, keep grinding. over and out.
@ssgriffen I thought the intention was to remove the the animation of the ripple? If you want to remove the ripple completely you can change the
transition-duration
todisplay
and set it tonone
. Isn’t that what you want?@DevVersion yeah, it should probably disable the animation
It’s intentionally not removing the focus ripples, because those are part of the accessibility we want to provide for all Angular Material components.
We can remove the animation if ripples are globally disabled though. This would improve the performance and won’t really look like a ripple anymore.
cc. @jelbourn