How to disable the focus of mat-radio-button?

Question

My Modal appearance as the following when it is popup:

The component HTML as the below:

<h2 mat-dialog-title>Manuals</h2>
<div>
    <mat-dialog-content [formGroup]="myForm">
      Pick the manual type<br>
      <mat-radio-group formControlName="manualType">
        <mat-radio-button value="1">Share Manual Information with other system</mat-radio-button><br>
        <mat-radio-button value="2">New a Manual Information</mat-radio-button>
      </mat-radio-group>
    </mat-dialog-content>
    <mat-dialog-actions>
      <button mat-raised-button type="submit" color="primary" class="Update-btn" (click)="save()">Save</button>
      <button mat-raised-button type="button" class="Discard-btn" (click)="closeDialog()">Close</button>
    </mat-dialog-actions>
</div>

I have tried to disable the "disableRipple" parameter, however, it does not make any change. How can I remove the focus from the first radio button?

Answer 1

Since @angular/[email protected] there is special option autoFocus on MatDialogConfig

/** Whether the dialog should focus the first focusable element on open. */
autoFocus?: boolean = true;

So you can use it as follows:

let dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
  width: '250px',
  data: { name: this.name, animal: this.animal },
  autoFocus: false   <============================== this line
});

Stackblitz Example