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

[ericuldall]

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?

[AndrewEckart]

I've noticed an issue which is probably related - When using a button to open a MatDialog, the button will still have its focus style applied once the dialog is closed. This is actually visible in the current docs for AM 6.0.1: https://material.angular.io/components/dialog/overview

I suspect this may be intentional for accessibility, but it looks weird. According to this blog post, this issue used to exist in all AM buttons and the proper behavior is to give the element focus but remove the focus style.

[ericuldall]

It may be intentional but I think it's reasonable to make this configurable. It should be an implementation detail. As of now I'm thinking there's a couple hacks to get rid of that:

1. Apply custom style to .cdk-focused .cdk-program-focused on the element in question
2. Remove the .cdk-focused .cdk-program-focused classes from the element after the former event

Ideally there could just be some flag similar to the following:

<button mat-icon-button [disableFocus]="true"><mat-icon>menu</mat-icon></button>

[AndrewEckart]

@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

[ericuldall]

Yea, that seems to be a trivial fix for now. I didn't want to ripple at all so I just removed the mat-icon-button directive.

[crisbeto]

Closing as a duplicate of #8420.

[pablomario]

In my case, the real problem stay in button structure, 'material' build various sub components and last one is a 'div' with css class 'mat-button-focus-overlay':

My solution is simply, in 'style.css' file, add or sobrescribe the 'mat-button-focus-overlay'

.mat-button-focus-overlay { background-color: transparent!important; }

[LeoDoldan7]

Still an issue.

[daundkarmangesh1109]

Simply set [disableRipple]="true" in html.

[simeyla]

Inspired by @AndrewEckart answer - and in agreement of how it is more than a bit annoying here's my solution:

The following function finds and stores the currentTarget (which is the button or other element that initiated the dialog open). Then when the dialog is closed it blurs the button. Put this function somewhere accessible everywhere.

export const fixDialogFocus = (dialogRef: MatDialogRef<any>) => 
{
    if (event && event.currentTarget && (<any> event.currentTarget).blur)
    {
        const initiator: any = event.currentTarget;

        dialogRef.afterClosed().subscribe(() => 
        {
            setTimeout(() => {
                try { initiator.blur(); } catch {}    
            }, 0);
        });
    }
}

I just add this to each of my dialog constructors, or onInit() method:

export class DialogChoicesComponent<T extends {}> implements OnInit {

constructor(@Inject(MAT_DIALOG_DATA) public model: DialogChoicesModel<T>,
            public dialogRef: MatDialogRef<DialogChoicesModel<T>, DialogChoicesResult<T>>) { }

    ngOnInit() 
    {
        // magically unfocus initiator after dialog is closed
        fixDialogFocus(this.dialogRef);   
    }

Much easier to find everywhere you've used MatDialogRef<... than to find every individual button.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}