Установка фокуса на первый элемент списка в HTML + Angular вместо этого фокусирует второй элемент

Я работал над требованием к пользовательскому интерфейсу: как только клавиша табуляции нажата в первый раз, мне нужно настроить фокус на первом элементе элемента списка, который состоит из массива объектов. В следующий раз, когда я нажимаю клавишу 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>

А это код клавиши табуляции:

@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, но любая подсказка или помощь очень ценятся. Заранее спасибо.

По просьбе я создал Stackblitz: https://stackblitz.com/edit/get-data-and-display-in-ul-and-li-hbg7xj?file=src%2Fapp%2Fapp.comComponent.ts