Material - keyup.enter na autocomplete (Angular)

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.

Przygotuj jakiś jsfiddle tak żeby można było eksperymentować.

https://stackblitz.com/edit/angular-bwbaq1

Zrobiłem coś takiego.

Oczekiwane działanie: po naciśnięciu entera wybierany jest wiersz na autocomplete, a drugie naciśnięcie powoduje wyświetlenie go na liście <ul>. Przyciśnięcie myszką ma spowodować tylko wypisanie wybranego elementu w autocomplete, ale nie wrzucanie go na listę - potrzebna byłaby weryfikacja, co zostało zaznaczone.

Aktualne działanie: już pierwsze wciśnięcie przycisku powoduje od razu wrzucenie elementu na listę, co więcej, zaznaczenie go ręcznie powoduje też wbicie na listę.

refresh