如何阻止PrimeNG Dialog打开时自动聚焦首个按钮或输入元素？

没问题，我刚好处理过类似的需求，PrimeNG的Dialog默认确实会自动聚焦到第一个可交互元素（比如按钮、输入框），不过有几个靠谱的办法能解决这个问题：

1. 最简单的方法：使用autoFocus属性（推荐） #

如果你的PrimeNG版本是12及以上（现在大部分项目用的版本都支持），直接给Dialog添加[autoFocus]="false"就能完全禁用自动聚焦行为，代码修改如下：

<p-dialog 
  header="User Details" 
  [(visible)]="displayDialog" 
  [responsive]="true" 
  showEffect="fade" 
  [modal]="true" 
  (onAfterHide)="onDialogHide()"
  [autoFocus]="false" <!-- 新增这个属性即可 -->
> 
  <p-button icon="fa fa-fw fa-minus" label="Delete" class="delete-button"> </p-button> 
</p-dialog>

这个方法最直接，不需要额外的DOM操作或事件监听。

2. 旧版本兼容：添加隐藏的焦点捕获元素 #

如果你的PrimeNG版本比较旧，没有autoFocus这个属性，可以在Dialog内容的最顶部添加一个不可见的可交互元素，让Dialog自动聚焦到它上面（用户完全感知不到），从而避免聚焦到按钮或输入框：

<p-dialog 
  header="User Details" 
  [(visible)]="displayDialog" 
  [responsive]="true" 
  showEffect="fade" 
  [modal]="true" 
  (onAfterHide)="onDialogHide()"
> 
  <!-- 隐藏的焦点捕获元素，放在最前面 -->
  <div tabindex="0" style="position: absolute; opacity: 0; pointer-events: none;"></div>
  
  <p-button icon="fa fa-fw fa-minus" label="Delete" class="delete-button"> </p-button> 
</p-dialog>

原理是Dialog会优先聚焦到第一个tabindex ≥ 0的元素，这个隐藏元素会被优先选中，而且因为样式设置了透明和禁止指针事件，不会影响用户操作。

3. 手动控制焦点：监听onShow事件 #

你也可以通过Dialog的onShow事件，在弹窗显示后手动调整焦点位置，比如把焦点设置到Dialog容器本身（而非内部的按钮/输入框）：

首先在组件的TS文件中添加处理函数：

onDialogShow() {
  // 获取Dialog的容器元素
  const dialogContainer = document.querySelector('.p-dialog');
  if (dialogContainer) {
    // 给容器设置tabindex，然后聚焦它
    dialogContainer.setAttribute('tabindex', '-1');
    dialogContainer.focus();
  }
}

然后在Dialog上绑定这个事件：

<p-dialog 
  header="User Details" 
  [(visible)]="displayDialog" 
  [responsive]="true" 
  showEffect="fade" 
  [modal]="true" 
  (onAfterHide)="onDialogHide()"
  (onShow)="onDialogShow()" <!-- 绑定显示事件 -->
> 
  <p-button icon="fa fa-fw fa-minus" label="Delete" class="delete-button"> </p-button> 
</p-dialog>

这样弹窗显示后，焦点会落在Dialog容器上，而不是内部的按钮。

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