'Radio button focus in angular material dialog

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

angular-material2

Solution 1:^[1]

Just to loop back round on this. Turned out it was an issue in Angular material at the time: https://github.com/angular/components/issues/17876

Should be fixed now.

Solution 2:^[2]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Matt Harrison
Solution 2	Awais

'Radio button focus in angular material dialog

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]