角：項目を削除した後、オートコンプリートフィールドがフォーカスを変更します

Question

私は、PrimeNGコンポーネントを使用するAngular 2アプリを持っています。

UIは、the documentationのものと同様のマルチセレクト（p-autoComplete）とオートコンプリート成分を有する：

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

唯一の違いは、私の場合、入力フィールドは、寸法およびスクロールバーを固定していることです。

問題：

私はそれが入力フィールドの下にフォーカスを移動オートコンプリートリストの途中から要素を削除するたびに。それは次のようになります。

それは除去されなければならないいくつかのフィールドがある場合は特に、ユーザにとって非常に迷惑です。

質問：要素を削除した後にスクロールを同じ位置にとどまらせる方法を教えてください。

をより具体的には、ブラウザのコンソールを使用してdocumentation pageui-autocomplete-multiple-container.ui-inputtextへのCSSクラスに直接次のCSS

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

を追加することによって、問題を再現することができます再現するためにどのように

。

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

UPDATE 2：私はこのようなコードを使用してコンポーネントにonUnselect方法を設定することでスクロール位置を取得するために管理 ：UPDATEが01​​

私はそれを動作させるために管理

解決策は、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

あなたが再現するplunkerを作成することができ、下記のと同じように処理するために

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