javascript - How can I set focus for mat-input inside the mat-radio

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

问题是它在选择单选按钮的操作完成之前将焦点设置为输入元素，因此一旦完成，它会立即将焦点切换到单选按钮。

一种解决方案是改变

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

至

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

以便在将焦点设置到输入元素之前等待片刻。