Tengo modal hecho de una barra de búsqueda y una lista de elementos, creados con un ngbDropdown dividido en 2 componentes, padre e hijo. Funciona correctamente, pero no puedo encontrar una manera de habilitar la navegación con el teclado (use las teclas ARRIBA y ABAJO para moverse entre los elementos de la lista).
Siguiendo la documentación oficial, intenté usar ngbDropdownItem, pero no funciona.
Estas son las plantillas de mis 2 componentes:
<div ngbDropdown class="dropdown-no-arrow" (openChange)="openChange($event)" container="body"> <!-- trigger --> <ng-container> <button class="btn" ngbDropdownToggle *ngIf="authorizationService.loggedInUser"> <i class="fal fa-farm me-2"></i> <span>{{ authorizationService.loggedInUser.name }}</span> <i class="fal fa-chevron-down ms-2"></i> </button> </ng-container> <!-- menu --> <div ngbDropdownMenu aria-labelledby="currentMenuItem" id="currentDropdown_{{ id }}"> <button ngbDropdownItem (click)="openNewModal()"> <i class="fal fa-plus me-1"></i> <span i18n>New</span> </button> <dm-child-list [isListDisplayed]="isDropdownOpened"></dm-child-list> </div> </div> <div class="dropdown-header d-flex margin-x align-items-center"> <h6 class=" mb-0 flex-grow-1" i18n>MY LIST</h6> </div> <div class="px-4 py-2"> <div class="form-group mb-0"> <input class="form-control form-control-sm" libAutofocus [(ngModel)]="elSearch" (ngModelChange)="elSearch$.next($event)" i18n-placeholder placeholder="Search elements"> </div> </div> <button *ngFor="let el of list; let i = index;" ngbDropdownItem [ngClass]="{'top-border': i === 0}"> <i class="me-2 fas fa-check-circle text-success" *ngIf="selectedEl?.id === el.id" title="Current element"></i> <i class="me-2 fal fa-circle" *ngIf="selectedEl?.id !== el.id"></i> <span>{{ el.name }}</span> </button>¿Alguien puede ayudar a hacer que la selección del teclado funcione?
¡Gracias!