CODEWITHSUNDEEP
angularangular5angular-material-5
Paul
Paul

Reputation: 481

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

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>

Illustration

Upvotes: 21

Views: 7539

Answers (7)

madhan kumar
madhan kumar

Reputation: 1608

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.

Upvotes: 14

Codendaal
Codendaal

Reputation: 534

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

Upvotes: 0

BBE
BBE

Reputation: 11

Use it like this

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

Upvotes: 1

Anand Raja
Anand Raja

Reputation: 3098

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.

Upvotes: 0

joker
joker

Reputation: 56

This style fixed for me:

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

Upvotes: 1

Pablo M.
Pablo M.

Reputation: 492

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

Upvotes: 2

yuzhou
yuzhou

Reputation: 86

  1. 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>
  1. Import ViewChild and ElementRef in the .ts file:
{ ViewChild, ElementRef } from '@angular/core';
  1. Declare a new variable in the .ts file:
@ViewChild('changeButton') private changeButton: ElementRef;
  1. 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');
}

Upvotes: 6

Related Questions