Angular中调用datepicker.close()后，如何将焦点设置回输入字段或日期选择器？

问题场景 #

使用仅支持年月选择的Mat-Datepicker时，调用datepicker.close()后焦点会跳到页面顶部，Tab键无法正常聚焦到下一个组件，需要强制将焦点放回对应的matInput。

解决方案 #

通过模板引用变量结合setTimeout延迟聚焦，确保日期选择器完全关闭后再将焦点放回输入框：

修改后的模板代码（picker.component.html）

<mat-form-field>
  <input
    #dateInput
    matInput
    [matDatepicker]="picker"
  >
  <mat-datepicker #picker (monthSelected)="onMonthSelect($event, picker)">
  </mat-datepicker>
</mat-form-field>

修改后的组件代码（picker.component.ts）

import { Component, ViewChild, ElementRef } from '@angular/core';
import { Moment } from 'moment';

@Component({
  selector: 'app-picker',
  templateUrl: './picker.component.html',
  styleUrls: ['./picker.component.css']
})
export class PickerComponent {
  @ViewChild('dateInput') dateInput!: ElementRef<HTMLInputElement>;

  onMonthSelect(date: Moment, datepicker: any){
    datepicker.close();
    // 延迟聚焦，确保日期选择器关闭的DOM操作完成
    setTimeout(() => {
      this.dateInput.nativeElement.focus();
    }, 0);
  }
}

原理说明 #

datepicker.close()会触发一系列DOM更新操作，立即调用focus()可能会被这些操作覆盖。使用setTimeout（0延迟）可以让聚焦逻辑在当前事件循环结束后执行，此时日期选择器已经完全关闭，DOM状态稳定，能确保焦点正确回到输入框。

内容的提问来源于stack exchange，提问作者Rowelsky