question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Global Disable Ripple Does Not Affect Keyboard Focus

See original GitHub issue

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; }

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:15 (8 by maintainers)

github_iconTop GitHub Comments

2reactions
ssgriffencommented, Jan 5, 2018

You are a hero @DevVersion don’t let it go to your head though, keep grinding. over and out.

1reaction
devversioncommented, Jan 5, 2018

@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 to display and set it to none. Isn’t that what you want?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Global Disable Ripple Does Not Affect Keyboard Focus #8298
When you set disabled: true using RippleGlobalOptions , the ripple should disappear completely, no matter if the focus arrives through tab key ...
Read more >
Angular Material 2 - Disable Ripple? - Stack Overflow
Use disableRipple as an attribute to disable ripples for the md-tab-group as Angular2+ using the Angular material. Just simply do something like this:...
Read more >
Ripples | Angular Material
This is specifically useful in combination with the disabled global option, because globally disabling ripples won't affect the focus indicator ripples.
Read more >
Frequently Asked Questions - Input Director
No. Input Director can quite happily control a client system whether the keyboard/mouse is removed or present. Return to top. A. 2.12 What...
Read more >
Material Ripples - Quasar Framework
By default, the Ripple directive is triggered on click or keyup. However, you can change that and make it trigger earlier, on the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found