Angular 11嵌套p-dialog场景下按TAB键跳过输入框问题求助

根因分析 #

• 对应Angular 11适配的PrimeNG 11.x分支存在嵌套dialog焦点陷阱（focusTrap）的已知bug：p-dialog默认开启focusTrap限制焦点仅在dialog内部移动，嵌套场景下内外两层dialog的焦点陷阱会同时生效，统计可聚焦元素时出现重复计数/漏算，最终导致偶数位输入框被跳过。
• 嵌套dialog未配置appendTo属性，内层dialog挂载在外层dialog的DOM节点内部，导致焦点捕获逻辑重复遍历两次可聚焦元素，按下tab时奇数位元素被两次逻辑判定后跳过了下一位元素。
• 可能存在隐藏的可聚焦元素（如PrimeNG dialog自动插入的焦点锚点、透明遮罩层的可聚焦节点）插入到输入框之间，占用了默认的tab顺序位。

解决办法 #

• 优先给内层p-dialog添加两个属性配置，90%以上的同类场景可以直接修复：

  <p-dialog 
    header="xxx" 
    [(visible)]="displayModal" 
    [modal]="true" 
    [style]="{width: '65vw'}" 
    [baseZIndex]="10000"
    [appendTo]="'body'"
    [focusTrap]="false"
  >
  

  appendTo="body"会把内层dialog直接挂载到body根节点下，脱离外层dialog的DOM结构，避免焦点逻辑互相干扰；如果不需要限制焦点仅在dialog内移动，直接关闭focusTrap即可彻底解决焦点陷阱冲突。
• 如果需要保留内层dialog的焦点限制，可以手动给所有输入框指定连续的正整数tabindex，强制覆盖默认tab顺序：

  <label>A</label> <div><input type="text" pInputText tabindex="1" /></div>
  <label>B</label> <div><input type="text" pInputText tabindex="2" /></div>
  <label>C</label> <div><input type="text" pInputText tabindex="3" /></div>
  <!-- 后续输入框依次顺延tabindex值 -->
  

• 可选兜底方案：监听内层dialog的onShow事件，dialog打开后手动给第一个输入框触发聚焦，重置焦点计数逻辑。

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