Angular:自动填充字段在删除项目后更改焦点

Question

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

UI具有自动完成组件,其中multi-select(p-autoComplete)类似于文档中的那个:

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

直接在文档页面上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

您应该使用onFocus事件来处理与下面相同的内容，

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

  ....


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

}

现场演示