Button looks selected in Angular-CodePudding

In my application when my material dialog pop up, the "X" button to leave the dialog looks selected. If I click inside the dialog, it unselect itself.

<button mat-icon-button  [mat-dialog-close]="true">
  <mat-icon  color="warn">close</mat-icon>
</button>

button {
  margin-top: 10px;
  padding-left: 10px;
}

.close-button{
  margin-top: 0px;
  padding-left: 0px;
  float: right;
  top:-24px;
  right:-24px;
}

How can I make it look normal as soon as I open the dialog ?

CodePudding user response：

Set autoFocus attribute to false

let dialogRef = this.dialog.open(DialogExample, {
    autoFocus: false,
    //other attributes
});

CodePudding user response：

It isn't selected, but I guess the button is placed inside a dialog and By default on dialog open the first element will have the focus.

If you want to disable this autoFocus the following piece of code will help you.

const dialogRef = this.dialog.open(YourDialogComponent, {
    autoFocus: false
});

CodePudding user response：

To me it looks like the button has a background color, in your css set the background color / background to white or none