Angular: autocomplete field changes focus after element is deleted

Question

I have an Angular 2 application that uses PrimeNG components.

The user interface has an autocomplete component with multi-select ( p-autoComplete), similar to the one from the documentation :

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

The only difference is that in my case, the input field has fixed sizes and a scrollbar.

Problem:

Each time I delete an item from the middle of the autocomplete list, it moves focus to the bottom of the input field. It looks like this:

This is very annoying for users, especially if there are several fields that need to be deleted.

Question: How to make scrolling remain in one position after deleting an element?

How to reproduce:

, , css

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

ui-autocomplete-multiple-container.ui-inputtext css .

UPDATE: , onUnselect , :

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

2:

onUnselect onFocus.

-. onUnselect.

-. onFocus.

:

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;
}

, , , .

. , PrimeNG ​​ . , .

, , .

Answer 1

onFocus , ,

<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; 
}