CODEWITHSUNDEEP
angularangular-material
Kevin Wilde
Kevin Wilde

Reputation: 101

angular mat buttons, how to disable the focus overlay

I have a mat dialog box which has two options. For some reason, when it loads, the auto focus is turned on to one of the mat-buttons, making it not appear uniform. How do I make it so that neither button has the focus overlay turned on? Here is the code:

<div *ngIf="!discontinued">
    <h3>Do you want to return <b>{{quantity}}</b> of</h3>  
    <h3><b>Item #: {{itemNo}}?</b></h3> 
    <div mat-dialog-actions style="display: flex; justify-content: space-evenly;">
        <div>
           <button mat-button [disableRipple]="true" color="return" (click)="singleReturn()"  mat-dialog-close>Yes, complete my return.</button> 
        </div>
        <div>
           <button mat-button [disableRipple]="true" color="return" (click)="multipleReturns()" mat-dialog-close>Yes, return more items.</button>
        </div>
        
    </div>
    <div style="display: flex; justify-content: center; margin-top: 30px;">
        <a id="keep" mat-flat-button [mat-dialog-close]>No, I want to keep this item</a>
    </div>
</div>

enter image description here

Upvotes: 2

Views: 1120

Answers (1)

Vna
Vna

Reputation: 542

mat dialog has autoFocus property which you can set to false

this.dialogRef = this.dialog.open(exampleDialog, {
  width: '500px',
  data: { },
  autoFocus: false
});

Upvotes: 2

Related Questions