Button looks selected in Angular

user_9730836 0
Viewed 164

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.

enter image description here

<button mat-icon-button class="close-button" [mat-dialog-close]="true">
  <mat-icon class="close-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 ?

angular css
3 Answers

Set autoFocus attribute to false

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

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

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

user_165611990
Related