Angular material dialogue "cdkFocusInitial" not focusing properly for button

I am using Angular material dialogue for Confirm submit, with two buttons one for yes and other for cancel. Here "cdkFocusInitial" was used for yes button. The button was focusing for initial submit. But when we press the cancel button and again submitted, the yes button was not focusing, i.e. "cdkFocusInitial" is not working here.

The image shows the initial submit.



The image below shows the submit after clicking the cancel button.

Below my dialogue component.html

<h2 mat-dialog-title>Confirm Submit</h2>
<mat-dialog-actions>
<button mat-button mat-raised-button cdkFocusInitial mat-dialog-close="true" style="margin-right: 5px;">Yes</button>
<button mat-button mat-raised-button mat-dialog-close="false">Cancel</button>
</mat-dialog-actions>


The dialogue open code in other submit component

openDialog(){
let dialogpopupref=this.matdialog.open(DialogpopupComponent);
dialogpopupref.afterClosed().subscribe(result=>{
console.log("dialog result is" +result);
if(result=="true"){
console.log("in true");
}
});
}


Please someone help in solving this issue. Whenever I submit, the confirm dialogue must open with "yes" button focused.

Continue reading...