Açısal: otomatik tamamlama alanı, bir öğeyi kaldırdıktan sonra odağı değiştirir

Question

PrimeNG bileşenlerini kullanan bir Açısal 2 uygulamasına sahibim.

UI the documentation den benzer çoklu seçim (p-autoComplete) ile tamamlama bileşene sahip:

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

tek fark, zaman durumda giriş alanı boyutları ve kaydırma çubuğu sabit olmasıdır.

Sorun:

Ben girdi alanın alt odağı taşır otomatik tamamlama listesinden ortasından bir öğe kaldırmak her zaman. Bu şuna benzer:

Bu çıkarılmalıdır bazı alanlar vardır, özellikle kullanıcılar açısından çok can sıkıcı.

Soru: Bir öğeyi kaldırdıktan sonra aynı konumda kalmak için kaydırma nasıl zorlanır?

çoğaltmak için:

daha spesifik olmak gerekirse, tarayıcı konsolunu kullanarak documentation pageui-autocomplete-multiple-container.ui-inputtext içine css sınıfa doğrudan sonraki css

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

ekleyerek sorunu yeniden.

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

GÜNCELLEME 2: Böyle kod kullanarak bileşeninde onUnselect yöntemi kurarak kaydirac pozisyonunu başardı : GÜNCELLEME

Ben çalışması için yönetilen

Çözüm, onUnselect ve onFocus olay işleyicilerinin birleşimidir. İlk önce

. Son kaydırma çubuğunu onUnselect numaralı çağrı alanına kaydediyorum.

İkincisi. Bu değeri onFocus çağrısı sırasında belirtilen öğeye ayarlıyorum.

karşılık gelen kod şuna benzer:

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

O iyi çalışıyor ve muhtemelen bu son çözüm olacaktır. Bununla birlikte, bundan hoşlanmıyorum. PrimeNG çalışanlarının bileşenlerinde böyle bir işlevselliği yerleştirmeleri daha iyi olurdu. Benim için garip neden kutudan çıkmıyor?

Daha iyi bir çözüm bulursanız lütfen öneriniz.

Aşağıda aynı işlemek için onFocus olayı kullanıyor olmalıdır

Answer 1

,

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