Angular自定义日期选择器弹窗关闭后焦点异常：焦点返回父元素而非触发按钮

兄弟，这种焦点乱跑的问题真的太闹心了！我之前做Angular自定义组件时也踩过类似的坑，给你捋捋可能的原因和实用的解决办法：

首先得明确核心问题：你的自定义日期选择器里，打开日历的按钮大概率和父输入框/标签是关联在一起的，要么是Angular表单控件的默认行为，要么是DOM事件的连锁反应，导致弹窗关闭时焦点自动“跑”回了父表单元素，就算你手动调用聚焦方法，也可能被后续的变更检测或默认事件给覆盖了。

给你几个具体的排查和解决方向：

1. 调整聚焦时机，确保DOM状态稳定 #

很多时候我们调用focus()的时机太早——比如弹窗还在执行关闭动画，或者Angular的变更检测还没处理完弹窗关闭后的DOM更新，这时候手动聚焦的操作会被后续的默认行为覆盖。

你可以试试用setTimeout把聚焦逻辑放到宏任务队列里，等所有DOM更新和默认事件都跑完后再执行：

// 假设你用@ViewChild获取了触发按钮的DOM引用
@ViewChild('calendarTrigger') calendarTriggerButton!: ElementRef<HTMLButtonElement>;

// 弹窗关闭的处理函数
onCalendarClose() {
  // 0延迟的setTimeout能确保DOM状态稳定后再执行聚焦
  setTimeout(() => {
    this.calendarTriggerButton.nativeElement.focus();
  }, 0);
  // 如果弹窗有关闭动画（比如fade-out），可以把延迟调到和动画时长一致，比如300ms
  // setTimeout(() => { ... }, 300);
}

2. 临时阻止父元素自动抢焦点 #

如果父输入框是绑定了FormControl的Angular表单控件，弹窗关闭时Angular很可能会自动把焦点归还给这个表单元素。这时候可以临时禁用父元素的聚焦能力，等按钮聚焦完成后再恢复：

@ViewChild('parentInput') parentInput!: ElementRef<HTMLInputElement>;
@ViewChild('calendarTrigger') calendarTriggerButton!: ElementRef<HTMLButtonElement>;

onCalendarClose() {
  // 先把父input设为不可聚焦
  this.parentInput.nativeElement.setAttribute('tabindex', '-1');
  
  setTimeout(() => {
    this.calendarTriggerButton.nativeElement.focus();
    // 恢复父input的聚焦能力
    this.parentInput.nativeElement.setAttribute('tabindex', '0');
  }, 0);
}

3. 检查弹窗组件的自动焦点恢复配置 #

如果你用了Angular CDK Overlay来实现弹窗，它默认有个restoreFocus配置项，会自动把焦点归还给“打开弹窗的触发元素”。但如果你的按钮没被正确识别为触发元素，CDK就会把焦点归还给最近的表单元素（也就是你的父input）。

这时候可以手动关闭CDK的自动恢复焦点，然后自己控制聚焦逻辑：

import { OverlayConfig } from '@angular/cdk/overlay';

// 在创建Overlay的配置里修改
const overlayConfig = new OverlayConfig({
  // 你的其他配置，比如position、scroll策略
  restoreFocus: false // 关闭自动恢复焦点的默认行为
});
// 之后在弹窗关闭时调用我们自己的聚焦逻辑即可

4. 定位焦点被抢走的具体时机 #

如果上面的方法都不管用，你可以在控制台打印焦点变化，精准找到是哪一步把焦点从按钮抢走了：

onCalendarClose() {
  console.log('弹窗刚关闭时的焦点:', document.activeElement);
  
  this.calendarTriggerButton.nativeElement.focus();
  console.log('手动聚焦后的焦点:', document.activeElement);
  
  setTimeout(() => {
    console.log('100ms后的焦点:', document.activeElement);
  }, 100);
}

如果手动聚焦后焦点是按钮，但延迟后变成了父input，说明有某个延迟执行的逻辑在抢焦点，找到它改掉就行。

备注：内容来源于stack exchange，提问作者TitaniumMithril