Mengatur fokus pada elemen pertama dari item daftar di HTML + Angular akan memfokuskan yang kedua sebagai gantinya

Saya telah mengerjakan sebuah kebutuhan untuk UI, begitu tombol tab ditekan untuk pertama kalinya, saya perlu mengatur fokus pada elemen pertama dari item daftar yang dibangun dengan array objek. Pada kali berikutnya saya menekan tombol tab, saya perlu menelusuri item daftar dan jika saya mencapai akhir daftar, saya kembali ke elemen pertama.

Sebenarnya saya mencapai tujuan saya sebagian, masalah yang saya hadapi adalah begitu saya menekan tombol tab untuk pertama kalinya, itu memfokuskan item daftar kedua alih-alih yang pertama dan begitu saya mencapai akhir daftar dan menekan tab, itu akan memfokuskan yang kedua, selalu melewati item daftar pertama, tetapi tidak yakin kenapa.

Ini adalah kode HTML dari komponen:

<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 }}
              <div class="option-label">
                <span>{{ option.name}}
                </span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

Dan ini adalah kode untuk tombol 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++;
    }

Saya telah men-debug dan mencoba memaksa fokus dengan document.getElementById... tetapi saya mendapatkan hasil yang sama. Saya bertanya-tanya apakah ada sesuatu yang mungkin terlewat, tidak yakin apakah tabindex bisa menjadi alasannya, tetapi petunjuk atau bantuan apa pun akan sangat dihargai. Terima kasih sebelumnya.

Sesuai permintaan, saya membuat Stackblitz: https://stackblitz.com/edit/get-data-and-display-in-ul-and-li-hbg7xj?file=src%2Fapp%2Fapp.component.ts

Jawaban #1

@Amenawon benar dalam hal fakta bahwa masalah di sini adalah Anda memicu event fokus dua kali.

Yang pertama dari this.optionsTypeMenu.nativeElement.children[0].focus(); dan yang kedua adalah event default dari tombol tab.

Untuk melakukan ini dengan benar dan mencegah ini di Angular, kita perlu menentukan kunci apa yang akan didengarkan, dan argumen apa yang akan diteruskan ke listener

seperti ini @HostListener('document:keydown.tab', ['$event'])

Itulah mengapa argumen acara Anda tidak terdefinisi

lihat perbaikan lengkap di sini di stackblitz

Jawaban #2

Ini bisa menjadi perilaku default browser, coba tambahkan pernyataan event.preventDefault() sebelum menetapkan elemen aktif