Angular 5: clicked button that triggers a dialog becomes highlighted after the dialog is closed

Question

I noticed that button gets classes cdk-focused and cdk-program-focused added after the dialog it triggered is closed. If I click anywhere effect disappears.

app.component.html [fragment]

<mat-cell *matCellDef="let element">
  <span matTooltip="Delete" matTooltipPosition="right">
    <button mat-icon-button color="warn" (click)="openDeleteAssociationDialog()">
      <mat-icon>delete</mat-icon>
    </button>
  </span>
</mat-cell>

this is on purpose and a accessibility feature: https://github.com/angular/material2/issues/5129 — masterfloda, Mar 16 '18 at 21:49
is there a way to alter this feature behavior? as it makes no sense in this case — Paul, Mar 18 '18 at 16:49
@Paul had you get rid of this styling? i want to get rid of from such styling. — Ketan Akbari, Jun 01 '18 at 06:22

score 10 · Answer 1 · answered Jun 09 '21 at 12:16

Here the better solution is using the configuration property restoreFocus: false

matDialog.open(<your-component>, {
    restoreFocus: false
});

In this case, when you close matDialog using matDialogRef.close(), the focus will not apply to that delete button/icon.

Refer: https://github.com/angular/components/issues/8420 - it has other alternative solutions including restoreFocus: false.

score 6 · Accepted Answer · answered Jun 07 '18 at 11:06

Add to your button in HTML some id. In my case it's #changeButton:

<button #changeButton mat-icon-button (click)="changeItem(element)" disableRipple>
    <mat-icon>edit</mat-icon>
</button>

Import ViewChild and ElementRef in the .ts file:

{ ViewChild, ElementRef } from '@angular/core';

Declare a new variable in the .ts file:

@ViewChild('changeButton') private changeButton: ElementRef;

Subscribe to your dialog's afterClose() event and remove the cdk-program-focused css class:

dialogRef.afterClosed().subscribe(result => {
    this.changeButton['_elementRef'].nativeElement
        .classList.remove('cdk-program-focused');
}

score 2 · Answer 3 · answered Mar 04 '19 at 14:45

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

score 1 · Answer 4 · answered May 31 '20 at 22:12

1

This style fixed for me:

.mat-button, .mat-flat-button, .mat-stroked-button
{   
    &.cdk-program-focused .mat-button-focus-overlay
    {
        opacity: 0 !important;
    }
}

answered May 31 '20 at 22:12

joker

56
3

score 1 · Answer 5 · answered Oct 19 '20 at 14:18

Use it like this

        .mat-icon-button,
        a.mat-button {
            &.cdk-focused,
            &.cdk-program-focused {
                background-color: transparent;
    
                .mat-button-focus-overlay {
                    display: none;
                }
            }
        }

score 0 · Answer 6 · answered Aug 17 '20 at 06:27

0

You can simply over ride the css in the mat-dialog consuming file

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

In your case, add this css in mat-cell component's css file.

answered Aug 17 '20 at 06:27

Anand Raja

2,676
1
30
35

score 0 · Answer 7 · answered May 05 '21 at 04:29

Based off @yuzhou, I found that some buttons still retain some form of focus. Instead of removing the classes, I call blur on the element, this solves my problem.

dialogRef.afterClosed().subscribe(result => {
    this.changeButton['_elementRef'].nativeElement.blur(); 
}

Angular 5: clicked button that triggers a dialog becomes highlighted after the dialog is closed

7 Answers7