diff --git a/src/app/components/autocomplete/autocomplete.ts b/src/app/components/autocomplete/autocomplete.ts index 2998c2e445f..461ec746c00 100755 --- a/src/app/components/autocomplete/autocomplete.ts +++ b/src/app/components/autocomplete/autocomplete.ts @@ -8,7 +8,7 @@ import {SharedModule,PrimeTemplate} from 'primeng/api'; import {DomHandler, ConnectedOverlayScrollHandler} from 'primeng/dom'; import {ObjectUtils, UniqueComponentId} from 'primeng/utils'; import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms'; -import {ScrollingModule} from '@angular/cdk/scrolling'; +import {CdkVirtualScrollViewport, ScrollingModule} from '@angular/cdk/scrolling'; export const AUTOCOMPLETE_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, @@ -62,7 +62,7 @@ export const AUTOCOMPLETE_VALUE_ACCESSOR: any = { - +
  • {{resolveFieldData(option)}} @@ -217,10 +217,14 @@ export class AutoComplete implements AfterViewChecked,AfterContentInit,OnDestroy @ViewChild('ddBtn') dropdownButton: ElementRef; + @ViewChild(CdkVirtualScrollViewport) viewPort: CdkVirtualScrollViewport; + @ContentChildren(PrimeTemplate) templates: QueryList; overlay: HTMLDivElement; + itemsWrapper: HTMLDivElement; + itemTemplate: TemplateRef; selectedItemTemplate: TemplateRef; @@ -273,6 +277,8 @@ export class AutoComplete implements AfterViewChecked,AfterContentInit,OnDestroy itemClicked: boolean; + virtualScrollSelectedIndex: number; + constructor(public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef, public differs: IterableDiffers) { this.differ = differs.find([]).create(null); this.listId = UniqueComponentId() + '_list'; @@ -300,10 +306,20 @@ export class AutoComplete implements AfterViewChecked,AfterContentInit,OnDestroy if (this.highlightOptionChanged) { setTimeout(() => { - if (this.overlay) { + if (this.overlay && this.itemsWrapper) { let listItem = DomHandler.findSingle(this.overlay, 'li.p-highlight'); + if (listItem) { - DomHandler.scrollInView(this.overlay, listItem); + DomHandler.scrollInView(this.itemsWrapper, listItem); + } + + if (this.virtualScroll && this.viewPort) { + let range = this.viewPort.getRenderedRange(); + this.updateVirtualScrollSelectedIndex(); + + if (range.start > this.virtualScrollSelectedIndex || range.end < this.virtualScrollSelectedIndex) { + this.viewPort.scrollToIndex(this.virtualScrollSelectedIndex); + } } } }, 1); @@ -361,6 +377,12 @@ export class AutoComplete implements AfterViewChecked,AfterContentInit,OnDestroy }); } + updateVirtualScrollSelectedIndex() { + if (this.highlightOption && this.suggestions && this.suggestions.length) { + this.virtualScrollSelectedIndex = this.findOptionIndex(this.highlightOption, this.suggestions); + } + } + writeValue(value: any) : void { this.value = value; this.filled = this.value && this.value != ''; @@ -487,6 +509,7 @@ export class AutoComplete implements AfterViewChecked,AfterContentInit,OnDestroy switch (event.toState) { case 'visible': this.overlay = event.element; + this.itemsWrapper = this.virtualScroll ? DomHandler.findSingle(this.overlay, '.cdk-virtual-scroll-viewport') : this.overlay; this.appendOverlay(); if (this.autoZIndex) { this.overlay.style.zIndex = String(this.baseZIndex + (++DomHandler.zindex));