Material - keyup.enter na autocomplete (Angular)

Odpowiedz Nowy wątek
2018-11-12 14:24
0

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.

Pozostało 580 znaków

2018-11-12 14:41
0

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

Pozostało 580 znaków

2018-11-12 15:28
0

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ę.

Pozostało 580 znaków

2018-11-13 13:24
0

refresh

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0