Angular中Tab键控制列表焦点时首个元素无法获焦问题

需求要求：首次按下Tab键时聚焦对象数组构建的列表首个元素；后续按Tab键遍历列表元素，到达末尾后按Tab需回到首个元素。但当前实现存在异常：首次按Tab键会聚焦第二个列表元素，遍历至末尾按Tab也会跳至第二个元素，始终跳过首个元素。

组件HTML代码 #

<div class="row">
  <div class="col-md-12">
    <div class="grandparent">
      <div class="parent">
        <ul #optionsTypeMenu>
          <li *ngFor="let option of options; let i = index; last as isLast" (click)="open(option)" tabindex="0" id="{{option.name}}">
            <div class="event-badge-block"
              [ngClass]="{ 'select': isSubmitted, 
                            'disabled': optionSelectionDisabled(option, isLast) }">
              <small class="bagde">{{ i + 1 }}</small>
              <div class="option-label">
                <span>{{ option.name}}
                </span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

原Tab键处理TS代码 #

@HostListener('document:keydown.tab') focusOptionFindingsSection(event: KeyboardEvent) {
        let activeElement = document.activeElement;
        let isCurrentFocusedElementTabable = this.optionsTypeMenu.nativeElement.contains(activeElement);

        if (!isCurrentFocusedElementTabable || this.CURR_TAB_INDEX == this.options.length - 1) {
            this.CURR_TAB_INDEX = 0;
        }

        if (this.CURR_TAB_INDEX == 0) {
            this.optionsTypeMenu.nativeElement.children[this.CURR_TAB_INDEX].focus();
        }

        this.CURR_TAB_INDEX++;
    }

• 默认Tab行为未阻止：浏览器自带的Tab跳转逻辑会在手动聚焦后继续执行，导致刚聚焦首个元素，默认行为就跳到了第二个。
• 索引更新时机错误：CURR_TAB_INDEX在每次方法结束时自增，首次进入时，刚聚焦索引0的元素，就立刻把索引改成1，下次触发时逻辑直接从1开始。
• 状态判断逻辑混乱：当已经聚焦在列表内时，索引重置条件覆盖了正常遍历逻辑，导致索引值始终无法正确对应当前聚焦元素。

核心修正点 #

1. 阻止默认Tab行为：添加event.preventDefault()，避免浏览器默认跳转覆盖手动聚焦操作。
2. 重构索引逻辑：区分“不在列表内”和“在列表内”两种场景，分别处理索引重置和遍历逻辑。
3. 调整索引更新顺序：确保索引值始终对应下一个要聚焦的元素，避免提前自增导致逻辑错位。

修正后的TS代码 #

@HostListener('document:keydown.tab', ['$event'])
focusOptionFindingsSection(event: KeyboardEvent) {
    // 阻止浏览器默认Tab跳转行为
    event.preventDefault();

    const activeElement = document.activeElement;
    const isInList = this.optionsTypeMenu.nativeElement.contains(activeElement);
    const listItems = this.optionsTypeMenu.nativeElement.children;

    if (!isInList) {
        // 当前焦点不在列表内，重置索引到首个元素并聚焦
        this.CURR_TAB_INDEX = 0;
        listItems[this.CURR_TAB_INDEX].focus();
    } else {
        // 当前焦点在列表内，计算下一个索引
        this.CURR_TAB_INDEX++;
        // 到达列表末尾时回到首个元素
        if (this.CURR_TAB_INDEX >= this.options.length) {
            this.CURR_TAB_INDEX = 0;
        }
        listItems[this.CURR_TAB_INDEX].focus();
    }
}

额外优化提示 #

• 初始化CURR_TAB_INDEX为0，确保组件加载后初始状态正确。
• 若页面存在其他可聚焦元素，建议缩小HostListener的监听范围（比如绑定到列表容器而非整个document），避免影响其他组件的Tab行为。

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