Estoy usando el menú desplegable de arranque con alimentación angular y aquí cada vez que ingreso una tecla presionando en la entrada, siempre cambia el valor desplegable a la primera opción.
HTML:
<div class="row mb-3 mt-3"> <div class="col"> <div ngbDropdown class="d-inline-block"> <button type="button" class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle > {{ clickMessage }} </button> <div ngbDropdownMenu aria-labelledby="dropdownBasic1"> <button ngbDropdownItem class="nav-link" href="#" (click)="getText($event.target.innerText)" > Option 1 </button> <button ngbDropdownItem class="nav-link" href="#" (click)="getText($event.target.innerText)" > Option 2 </button> <button ngbDropdownItem class="nav-link" href="#" (click)="getText($event.target.innerText)" > Option 3 </button> </div> </div> </div> </div>TS:
clickMessage = 'Choose an option'; getText(text) { this.clickMessage = text; }Agregue el siguiente código a su archivo ts.
@HostListener('keydown', ['$event']) public onKeyDown(evt) { if (evt.key === 'Enter') { evt.preventDefault(); this.onSubmit(); } }Te lo escribo en el siguiente stackblitz.
El comportamiento que está viendo se debe a que tiene algunos botones sin ningún atributo de tipo y, de forma predeterminada, los botones en el formulario activan el evento de envío. Agregue el tipo a los botones en el menú desplegable y debería funcionar.
<div ngbDropdownMenu aria-labelledby="dropdownBasic1"> <button type="button" ngbDropdownItem class="nav-link" href="#" (click)="getText($event, $event.target.innerText)" > Option 1 </button> <button type="button" ngbDropdownItem class="nav-link" href="#" (click)="getText($event, $event.target.innerText)" > Option 2 </button> <button ngbDropdownItem class="nav-link" href="#" (click)="getText($event, $event.target.innerText)" > Option 3 </button> </div>