Как я могу установить фокус для ввода мата внутри мата-радио

Question

Я пытаюсь установить фокус (курсор будет мигать) в поле ввода, щелкнув настраиваемый переключатель. Но это не happening.I Have stackblitz демо здесь.

пока я пробовал.

<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>

в компоненте

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

Answer 1

Проблема в том, что он устанавливает фокус на элемент ввода до того, как действие выбора переключателя завершается, поэтому, как только оно завершится, он немедленно переключает фокус на переключатель.

Одно из решений - изменить

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

к

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

так что он ждет некоторое время, прежде чем установить фокус на элемент ввода.