在使用 PrimeNG 的 p-autoComplete（启用下拉功能）时，按 Tab 键会意外聚焦到右侧的下拉按钮而非直接跳转至下一个表单控件；本文提供一种轻量、安全的自定义指令方案，精准禁用该按钮的 Tab 可访问性，同时保留输入框本身的焦点能力。
在使用 primeng 的 `p-autocomplete`（启用下拉功能）时，按 tab 键会意外聚焦到右侧的下拉按钮而非直接跳转至下一个表单控件；本文提供一种轻量、安全的自定义指令方案，精准禁用该按钮的 tab 可访问性，同时保留输入框本身的焦点能力。
PrimeNG 的 p-autoComplete 组件在启用 [dropdown]="true" 后，会自动渲染一个带有 .p-autocomplete-dropdown 类名的按钮（通常为向下箭头图标）。该按钮默认具有 tabindex="0"，因此在 Tab 导航流中会被依次选中——这不仅打断用户操作节奏，还可能引发可访问性问题（如屏幕阅读器误读）。
官方并未提供内置属性（如 skipDropdownTab 或类似配置）来跳过此按钮，但可通过 Angular 自定义指令 + Renderer2 安全地修改其 tabindex 属性，实现「仅禁用按钮焦点，不干扰输入框本身」的目标。
以下是一个推荐的解决方案：
✅ 自定义指令：NoButtonFocusDirective
import { Directive, ElementRef, Renderer2, AfterViewInit } from '@angular/core';
@Directive({
selector: '[noButtonFocus]',
standalone: true,
})
export class NoButtonFocusDirective implements AfterViewInit {
constructor(
private element: ElementRef,
private renderer: Renderer2
) {}
ngAfterViewInit() {
const dropdownBtn = this.element.nativeElement.querySelector('.p-autocomplete-dropdown');
if (dropdownBtn) {
// 安全移除按钮的 Tab 可聚焦性，不影响键盘操作其他功能（如 Enter 展开）
this.renderer.setAttribute(dropdownBtn, 'tabindex', '-1');
}
}
}
⚠️ 注意事项：
- 必须在
ngAfterViewInit中执行查询，确保 DOM 已渲染完成；- 使用
Renderer2而非直接操作element.nativeElement，符合 Angular 最佳实践并规避 SSR/安全风险；tabindex="-1"使按钮无法通过 Tab 进入，但仍可通过 JavaScript.focus()主动聚焦（不影响下拉交互逻辑）；- 该指令兼容响应式表单（
formControlName）与模板驱动表单（ngModel）。
✅ 在模板中使用
确保已声明并导入该指令（若为 standalone 组件，需在 imports 中添加；若为 NgModule，则需在 declarations 和 exports 中注册）：
<p-autocomplete nobuttonfocus inputid="myInput" class="p-fluid" formcontrolname="myFormControl" appendto="body"></p-autocomplete>
✅ 验证效果
启用浏览器开发者工具，检查渲染后的 DOM，确认 .p-autocomplete-dropdown 按钮节点已包含 tabindex="-1" 属性。此时连续按 Tab 键将从当前输入框直接跳转至下一个可聚焦元素（如下一个 p-autoComplete 输入框或普通 <input>），完全绕过下拉按钮。
? 补充建议：若项目中多处使用带下拉的 AutoComplete，可将该指令全局注册（如在
AppModule或SharedModule中），提升复用性；同时建议配合无障碍测试（如 axe DevTools）验证焦点流是否符合 WCAG 2.1 标准。
此方案简洁、无侵入、可维护性强，是解决 PrimeNG Autocomplete Tab 导航痛点的专业级实践。
