在 HTML + Angular 上将焦点设置在列表项的第一个元素上将会聚焦第二个元素

Question

我一直在研究 UI 的需求，一旦第一次按下 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 键的代码：

@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++;
    }

我一直在调试并尝试使用 document.getElementById 强制聚焦...但我得到了相同的结果。我想知道是否有什么我可能错过的东西，不确定 tabindex 是否可能是原因，但非常感谢任何线索或帮助。预先感谢。

Answer 1

这可能是浏览器的默认行为，请尝试在设置活动元素之前添加

event.preventDefault()

语句