按钮blur事件无法聚焦指定链接，按Tab焦点跳转地址栏问题

我之前用ngbPopover时碰到过几乎一模一样的焦点问题，结合你的代码和控制台输出来看，虽然link.focus()执行后控制台显示焦点确实落到了目标按钮上，但实际按Tab键跳地址栏，核心原因是popover的自动关闭逻辑在blur事件之后触发，把刚设置好的焦点给冲掉了。

问题拆解 #

从你的控制台输出能明确看出来：

• 调用link.focus()后，document.activeElement已经是目标的popoverLink按钮，而且document.hasFocus()返回true，说明聚焦操作本身是成功的。
• 但你设置了[autoClose]="true"，这个配置会让ngbPopover在失去焦点时自动关闭。当close按钮触发blur事件时，popover此时已经处于“即将失去焦点”的状态，你的聚焦操作刚完成，popover的关闭逻辑就启动了，关闭过程中可能会重置页面焦点到body，导致Tab键只能跳到浏览器地址栏。

可行的解决方案 #

1. 延迟关闭popover，给焦点留稳定时间

把popover的关闭逻辑包在setTimeout里，让浏览器先处理完焦点切换，再执行关闭操作：

blur(closebutton: HTMLButtonElement, link: HTMLButtonElement, p: any) { 
  console.log(closebutton); 
  console.log(link); 
  console.log(document.activeElement) 
  link.focus(); 
  console.log("active element before closing popover") 
  console.log(document.activeElement) 
  console.log(document.hasFocus()) 
  // 用0延迟让浏览器先完成焦点切换，再关闭popover
  setTimeout(() => {
    p.close();
  }, 0);
}

同时记得把HTML里close按钮的(click)="p.close(); returnFocus(p)"调整一下，避免重复触发关闭，比如改成只调用你的blur处理逻辑。

2. 调整autoClose策略，避免焦点变化触发关闭

把[autoClose]="true"改成[autoClose]="'outside'"，这样popover只会在点击外部区域时关闭，而不会因为焦点移出就触发关闭：

<button class="popoverLink" 
        [ngbPopover]="popContent" 
        triggers="manual" 
        #p="ngbPopover" 
        (click)="start = true; p.open(); returnFocus(p)" 
        [autoClose]="'outside'" <!-- 修改这里 -->
        placement="top-right bottom-right" 
        container="body" 
        html="true" 
        popoverClass="custom-popover" 
        (shown)="openPopover(p);" 
        (keypress)="keypress(p)" 
        #link > 
  {{split(element.description)[0]}} 
</button> /{{split(element.description)[1]}}

这种方式下，你可以在blur事件里直接关闭popover，不用担心焦点操作会触发自动关闭逻辑。

3. 额外检查：确保目标元素始终可聚焦

虽然你的目标是button（默认可聚焦），但如果后续有修改元素类型的情况，记得给元素加上tabindex="0"确保它能被聚焦：

<button class="popoverLink" tabindex="0" ... > ... </button>

验证方法 #

修改后可以在popover关闭后再打印一次document.activeElement，确认焦点是否还稳定在目标link上：

setTimeout(() => {
  p.close();
  console.log("active element after closing popover", document.activeElement);
}, 0);

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