कोणीय: स्वत: पूर्ण फ़ील्ड किसी आइटम को हटाने के बाद फोकस बदलता है

Question

मेरे पास एक कोणीय 2 ऐप है जो प्राइमएनजी घटकों का उपयोग करता है।

यूआई 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 में सीएसएस ब्राउज़र कंसोल का उपयोग वर्ग पर सीधे अगले सीएसएस

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

जोड़कर इस मुद्दे को दोबारा कर सकते हैं।

अद्यतन:

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

अद्यतन 2: मैं इस तरह कोड का उपयोग कर घटक में onUnselect विधि की स्थापना करके स्क्रोलर स्थिति पाने में कामयाब रहे कि मैं यह काम करने के लिए प्रबंधित

समाधान 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; 
} 

यह अच्छी तरह से काम करता है और शायद इस अंतिम समाधान हो जाएगा।

हालांकि मुझे यह पसंद नहीं है। अगर प्राइमएनजी लोग अपने घटक में ऐसी उपयोगी कार्यक्षमता एम्बेड करते हैं तो यह बेहतर होगा। मेरे लिए यह अजीब बात है कि यह बॉक्स से क्यों नहीं निकलता है।

यदि आपको बेहतर समाधान मिलता है तो कृपया प्रस्ताव दें।

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