Góc: trường tự động hoàn tất thay đổi tiêu điểm sau khi xóa một mục

Question

Tôi có ứng dụng Angular 2 sử dụng các thành phần PrimeNG.

Giao diện có phần autocomplete với đa chọn (p-autoComplete) tương tự như một trong các từ the documentation:

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

Sự khác biệt duy nhất là trong trường hợp của tôi lĩnh vực đầu vào đã cố định kích thước và thanh cuộn.

Vấn đề:

Mỗi lần khi tôi loại bỏ một phần tử từ giữa của danh sách autocomplete nó di chuyển tập trung vào dưới cùng của lĩnh vực đầu vào. Nó trông giống như thế này:

nó là rất khó chịu cho người dùng, đặc biệt là khi có một số lĩnh vực mà cần được loại bỏ.

Câu hỏi: Làm cách nào để buộc cuộn ở trên cùng một vị trí sau khi xóa phần tử?

Làm thế nào để tái sản xuất:

Để cụ thể hơn, bạn có thể tạo lại vấn đề bằng cách thêm css tiếp theo

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

trực tiếp trên lớp documentation page vào ui-autocomplete-multiple-container.ui-inputtext css sử dụng trình duyệt console.

UPDATE: tôi quản lý để có được vị trí cuộn bằng cách thiết lập onUnselect phương pháp trong các thành phần sử dụng mã như thế này:

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

UPDATE 2: Tôi quản lý để làm cho nó hoạt

Giải pháp là sự kết hợp của các trình xử lý sự kiện onUnselect và onFocus.

Trước tiên. Tôi lưu vị trí cuộn cuối cùng vào một trường trong cuộc gọi onUnselect.

Thứ hai. Tôi đặt giá trị này thành phần tử được chỉ định trong khi gọi onFocus.

Mã tương ứng trông như thế này:

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

Nó hoạt động tốt và có lẽ đây sẽ là giải pháp cuối cùng.

Tuy nhiên tôi không thích. Sẽ tốt hơn nếu các chàng trai của PrimeNG nhúng một chức năng hữu ích vào trong thành phần của họ. Đối với tôi, nó lạ ở sao nó không ra khỏi hộp.

Nếu bạn tìm thấy giải pháp tốt hơn, vui lòng đề xuất.

Answer 1

Bạn nên sử dụng onFocus kiện để xử lý tương tự như dưới đây,

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