如何在mat-收音机内设置mat-input的焦点

Question

我试着在点击自定义单选按钮时设置输入框上的焦点(光标闪烁)。但这不会发生我有stackblitz演示here。

到目前为止，我已经尝试过了。

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

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