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.

mat-icon-button shows focus circle after snav.close()

See original GitHub issue

Bug, feature request, or proposal:

Bug

What is the expected behavior?

The mat-icon-button will not be focused after closing the sidebar via snav.close()

What is the current behavior?

The mat-icon-button is focused after closing the sidebar via snav.close()

What are the steps to reproduce?

https://stackblitz.com/edit/angular-ubvx8j?file=app%2Fsidenav-responsive-example.html

What is the use-case or motivation for changing an existing behavior?

UI/UX Is not intuitive or easily controlled. Any workaround seems hacky at this point.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Currently testing latest in Chrome on MacOS.

Is there anything else we should know?

Issue Analytics

State:
Created 5 years ago
Comments:10 (1 by maintainers)

Top GitHub Comments

13reactions

AndrewEckartcommented, May 18, 2018

@ericuldall It can be solved pretty easily by adding onclick="this.blur()" to the button, though it is a bit annoying to add it everywhere. I forked your Stackblitz and added a 2nd button to demonstrate: https://stackblitz.com/edit/angular-ubvx8j-hgza91?file=app/sidenav-responsive-example.html

2reactions

daundkarmangesh1109commented, May 30, 2019

Simply set [disableRipple]=“true” in html.