Radio button focus in angular material dialog

Question

I'm using Angular 8 with the Angular Material components, and am running into an issue with the focus indicator in a dialog. When there is a radio group as the first control inside a dialog, as you tab around the dialog, the first option on the group gets selected - even if there is another option selected. i.e. when tabbing forward through the form, if the 2nd option is selected, the focus goes to the first option, then the selected option, then the buttons.

I've created a stackblitz here: https://stackblitz.com/edit/angular-2nkqr3 which shows the issue.

Does anyone have any ideas on how to stop/work around it always putting focus on the first option? (other than put something else first - unfortunately its the only thing in the dialog).

Thanks in advance for any advice,

Matt

Answer 1

Its simple set autoFocus:false when you call dialog like

 openDialog()() {
    const dialogRef = this.dialog.open(PopupComponent, {
      panelClass: 'modal-medium',
      data: { dialogueName: "Name" },
      autoFocus: false, //disable auto focus in dialog
    });
  }