如何在Mat收音机内为Mat输入设置焦点

Question

I am trying to set the focus (the cursor to blink) on the input box on the click on the custom radio button. But it is not happening.I have stackblitz demo here .

so far I have tried.

<mat-radio-group [(ngModel)]="selection" #radioGroup="matRadioGroup">
  <mat-radio-button value="option 1">option 1</mat-radio-button>
  <mat-radio-button value="option 2">option 2</mat-radio-button>
  <mat-radio-button value="option 3">option 3</mat-radio-button>
  <mat-radio-button value="option 4">option 4</mat-radio-button>
  <mat-radio-button [value]="customOption" (click)="onBlur()">
    <mat-form-field>
      <input matInput id="input" [(ngModel)]="customOption" />
    </mat-form-field>
  </mat-radio-button>
</mat-radio-group>

in component

onBlur() {
      document.getElementById('input').focus();
   }

Answer 1

The problem is that it sets focus to the input element before the action of selecting the radio button completes so, once it does complete, it immediately switches the focus to the radio button.

One solution is to change

document.getElementById('input').focus();

to

setTimeout(() => document.getElementById('input').focus());

so that it waits a moment before setting focus to the input element.