Angular Material：如何阻止MatDialog关闭后Autocomplete输入框自动重新聚焦？

这个问题我之前在项目里碰到过，Angular Material默认会在MatDialog关闭后把焦点还给触发它的元素——也就是你的autocomplete输入框，确实挺影响操作体验的。给你两个实用的解决办法：

方法一：使用MatDialog的restoreFocus配置项（推荐） #

这是官方提供的最直接的解决方案，完全不需要额外的DOM操作，只需要在打开对话框时添加一个配置项就能搞定：

修改你代码中打开AlertComponent的部分，加上restoreFocus: false：

const dialogRef = this.dialog.open(AlertComponent, {
  width: '650px',
  height: '450px',
  restoreFocus: false // 新增这一行即可
});

这个配置项的作用就是控制对话框关闭后，是否自动恢复之前的焦点状态。设为false后，就会跳过默认的焦点恢复逻辑，输入框自然就不会自动重新聚焦了。

方法二：手动控制焦点（适合自定义焦点目标的场景） #

如果你需要更灵活的控制——比如关闭对话框后把焦点移到页面的其他按钮或元素上，而不是完全取消焦点，可以在对话框关闭的回调里手动处理：

首先，你需要通过ViewChild获取到输入框的DOM引用（你已经在HTML里用#myAutocompleteInput标记了，直接用就行）：

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

// 在你的组件类内部添加
@ViewChild('myAutocompleteInput') myAutocompleteInput!: ElementRef<HTMLInputElement>;

然后在afterClosed的回调函数里，手动让输入框失去焦点，或者把焦点转移到其他元素：

dialogRef.afterClosed().subscribe(result => {
  if (result) {
    this.ticketPDFGeneratorService.generateReportFromRow(rec.id.trim(), rec.no);
    this.requestFormGroup.patchValue({ clinic: '' });
  }
  // 让autocomplete输入框失去焦点
  this.myAutocompleteInput.nativeElement.blur();
  // 如果你想把焦点移到其他元素，比如某个按钮，可以这样写：
  // document.getElementById('target-element-id')?.focus();
});

两种方法里，优先推荐第一种，因为它是Angular Material官方提供的标准配置，代码更简洁也更符合框架设计逻辑。

内容来源于stack exchange