Potrzebuję mieć następującą funkcjonalność dla mojego autocomplete: po kliknięciu entera/zaznaczeniu przycisku myszką jest wybierana jedna z opcji z autocomplete. Następnie, po przyciśnięciu kolejnego entera wiersz jest dodawany do listy (można go też dodać ręcznie za pomocą przycisku "Add" będącego obok). Co natomiast ma miejsce aktualnie: event keyup.enter nie jest w stanie wykonać poprzedzającego kroku, ponieważ pierwsze przyciśnięcie entera automatycznie wykonuje już docelową metodę. W tym celu wprowadziłem mały licznik, który weryfikuje, czy wiersz dopiero został wybrany do autocomplete, czy już ma być dodawany do listy. Pojawił się jednak problem dla sytuacji, w której zaznaczam ten element z autocomplete myszką, stąd dodałem event optionsSelected, który również zwiększa licznik kliknięć. Event ten jednak już nie rozróżnia, jakie zachowanie go wywołało - czy enter, czy kliknięcie myszką. Co więcej, wywołanie eventu optionsSelected przysłania event onkeyup.enter.
<mat-form-field class="example-full-width"
floatLabel="never">
<input type="text"
(onkeyup)="onTenantKeyUp($event)" // event optionsSelected przesłania ten event
placeholder="Pick one"
aria-label="Organization"
matInput
formControlName="tenant"
[matAutocomplete]="autoTenant">
<mat-autocomplete autoActiveFirstOption
(optionSelected)="onSelectTenant($event)">
<mat-option *ngFor="let tenant of filteredTenants | async"
[value]="tenant.name">
{{tenant.name}}
</mat-option>
</mat-autocomplete>
Finalnie event wygląda tak:
onSelectTenant(event) {
this.tenantEventFiringCounter++;
if (this.tenantEventFiringCounter === 1) {
this.previousSearchTenantName = event.option.value;
}
this.resetCounterIfSearchedTenantNameChanged();
if (event.key === 'Enter') { // brak dostępu do tej zmiennej
if (!this.isAddingTenantEventInProcess && this.tenantEventFiringCounter >= 2) {
this.addTenant();
}
}
}
Ma ktoś propozycję, jak rozwiązać taki problem? Potrzebowałbym się aktualnie dowiedzieć dla eventu optionSelected, jakie zachowanie go wywołało, ewentualnie sprawić, żeby nie przesłaniał on eventu onkeyup.