Kąt: pole autouzupełniania zmienia ostrość po usunięciu elementu

Question

Mam aplikację Angular 2, która korzysta z komponentów PrimeNG.

UI posiada komponent autouzupełniania z multi-select (p-autoComplete) podobną do tej z the documentation:

<p-autoComplete [(ngModel)]="countries" 
       [suggestions]="filteredCountriesMultiple" 
       (completeMethod)="filterCountryMultiple($event)" 
       [minLength]="1" 
       placeholder="Countries" 
       field="name" 
       [multiple]="true"> 
</p-autoComplete> 

Jedyną różnicą jest to, że w moim przypadku pole wejściowe ma stałe wymiary i pasek przewijania.

Problem:

Za każdym razem, kiedy usunąć element ze środka listy autouzupełniania porusza się skupić na dole pola wejściowego. Wygląda to tak:

Jest to bardzo irytujące dla użytkowników, zwłaszcza gdy istnieje kilka pól, które powinny zostać usunięte.

Pytanie: Jak wymusić przewijanie, aby pozostać w tej samej pozycji po usunięciu elementu?

Jak odtworzyć:

Aby być bardziej szczegółowe, można odtworzyć problem, dodając kolejny css

max-width: 150px; 
max-height: 100px; 
overflow-y: auto; 

bezpośrednio od klasy documentation page do ui-autocomplete-multiple-container.ui-inputtext css przy użyciu konsoli przeglądarki.

UPDATE: udało mi się uzyskać pozycję scroller konfigurując onUnselect metodę w składniku za pomocą kodu:

onUnselect(event: any) { 
    document.querySelector("div.my-input-class").scrollTop 
} 

UPDATE 2: udało mi się zrobić to praca

Rozwiązaniem jest połączenie procedur obsługi zdarzeń onUnselect i onFocus.

Pierwsza. Zapisz ostatnią pozycję przewijaka w polu w rozmowie onUnselect.

Po drugie. Ustawiam tę wartość na określony element podczas wywołania onFocus.

Odpowiedni kod wygląda następująco:

scrollPosition: number = 0; 

onUnselect(event: any) { 
    let input = document.querySelector("div.my-input-class"); 
    this.scrollPosition = input.scrollTop; 
} 

onFocus(event: any) { 
    let input = document.querySelector("div.my-input-class"); 
    input.scrollTop = this.scrollPosition; 
} 

To działa dobrze i prawdopodobnie będzie to ostateczne rozwiązanie.

Jednak nie podoba mi się to. Byłoby znacznie lepiej, gdyby gracze PrimeNG umieścili tak przydatną funkcję w swoim komponencie. Dla mnie to dziwne, dlaczego nie wychodzi z pudełka.

Jeśli znajdziesz lepsze rozwiązanie, zaproponuj.

Answer 1

należy używać onFocus imprezę obsługiwać takie same jak poniżej,

<p-autoComplete [(ngModel)]="countries" 
       [suggestions]="filteredCountriesMultiple"      
       (completeMethod)="filterCountryMultiple($event)" 
       styleClass="width12" (onFocus)="onFocus($event)"> 

    .... 


onFocus(event){ 
     window.scrollTo(0, 0); 

} 

LIVE DEMO

Answer 2

onUnselect(event: any) { 
    // get index of the removed element 
    // get total options count 
    // get height of the element that contains the options 
    // divide the height by number of options 
    // set scroll potion to the result of division multiplied by the index 
    document.querySelector('.ui-autocomplete-multiple-container.ui-inputtext').scrollTop = calculatedValue; 
}