Angular：删除项目后自动完成字段更改焦点

Question

我有一个使用 PrimeNG 组件的 Angular 2 应用程序。

UI 具有多选 (p-autoComplete) 的自动完成组件，类似于 the documentation 中的那个：

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

唯一的区别是，在我的例子中，输入字段有固定的尺寸和滚动条。

问题：

每当我从自动完成列表的中间删除一个元素时，它都会将焦点移到输入字段的底部。它看起来像这样：

这对用户来说很烦人，尤其是当有几个字段应该被删除时。

问题：如何在移除元素后强制滚动保持在同一位置？

如何重现：

更具体地说，您可以通过添加下一个 css 来重现问题

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

使用浏览器控制台直接将documentation page 转换成ui-autocomplete-multiple-container.ui-inputtext css 类。

更新： 我设法通过使用如下代码在组件中设置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

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

Answer 2

您应该使用onFocus 事件来处理与以下相同的情况，

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

  ....


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

}

LIVE DEMO