Merge pull request #7319 from IgniteUI/mkirova/fix-7234-8.2.x

fix(virtualization): Use virtual scroll top which takes virtual heig

Author: ChronosSF

projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts

@@ -716,13 +716,8 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
         if (!parseInt(this.scrollComponent.nativeElement.style.height, 10)) {
             return;
         }
-
-        const containerSize = parseInt(this.igxForContainerSize, 10);
-        const maxRealScrollTop = event.target.children[0].scrollHeight - containerSize;
-        const realPercentScrolled = maxRealScrollTop !== 0 ?  event.target.scrollTop / maxRealScrollTop : 0;
         if (!this._bScrollInternal) {
-            const maxVirtScrollTop = this._virtHeight - containerSize;
-            this._virtScrollTop = realPercentScrolled * maxVirtScrollTop;
+            this._calcVirtualScrollTop(event.target.scrollTop);
         } else {
             this._bScrollInternal = false;
         }
@@ -1289,11 +1284,25 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
     }
     private _updateVScrollOffset() {
         let scrollOffset = 0;
+        let currentScrollTop = this.scrollPosition;
+        if (this._virtHeightRatio !== 1) {
+            this._calcVirtualScrollTop(this.scrollPosition);
+            currentScrollTop = this._virtScrollTop;
+        }
         const vScroll =  this.scrollComponent.nativeElement;
         scrollOffset = vScroll && this.scrollComponent.size ?
-            this.scrollPosition - this.sizesCache[this.state.startIndex] : 0;
+        currentScrollTop - this.sizesCache[this.state.startIndex] : 0;
         this.dc.instance._viewContainer.element.nativeElement.style.top = -(scrollOffset) + 'px';
     }
+
+    protected _calcVirtualScrollTop(scrollTop: number) {
+        const containerSize = parseInt(this.igxForContainerSize, 10);
+        const maxRealScrollTop = this.scrollComponent.size - containerSize;
+        const realPercentScrolled = maxRealScrollTop !== 0 ?  scrollTop / maxRealScrollTop : 0;
+        const maxVirtScrollTop = this._virtHeight - containerSize;
+        this._virtScrollTop = realPercentScrolled * maxVirtScrollTop;
+    }
+
     private _updateHScrollOffset() {
         let scrollOffset = 0;
         scrollOffset =  this.scrollComponent.nativeElement &&
@@ -1564,13 +1573,8 @@ export class IgxGridForOfDirective<T> extends IgxForOfDirective<T> implements On
         if (!parseInt(this.scrollComponent.nativeElement.style.height, 10)) {
             return;
         }
-
-        const containerSize = parseInt(this.igxForContainerSize, 10);
-        const maxRealScrollTop = event.target.children[0].scrollHeight - containerSize;
-        const realPercentScrolled = maxRealScrollTop !== 0 ?  event.target.scrollTop / maxRealScrollTop : 0;
         if (!this._bScrollInternal) {
-            const maxVirtScrollTop = this._virtHeight - containerSize;
-            this._virtScrollTop = realPercentScrolled * maxVirtScrollTop;
+            this._calcVirtualScrollTop(event.target.scrollTop);
         } else {
             this._bScrollInternal = false;
         }

projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts

@@ -2845,9 +2845,9 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
             expect(GridFunctions.getCurrentCellFromGrid(grid, 1, 1).value).toBe('Ignite UI for Angular');
         }));
 
-        it('Verify filter cell chip is scrolled into view on click.', fakeAsync(() => {
+        it('Verify filter cell chip is scrolled into view on click.', async () => {
             grid.width = '470px';
-            tick(100);
+            await wait(30);
             fix.detectChanges();
 
             // Verify 'ReleaseDate' filter chip is not fully visible.
@@ -2858,11 +2858,11 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
                 'chip should not be fully visible and thus not within grid');
 
             GridFunctions.clickFilterCellChip(fix, 'ReleaseDate');
-            tick(100);
+            await wait(30);
             fix.detectChanges();
 
-            GridFunctions.closeFilterRow(fix);
-            tick(100);
+            grid.filteringRow.close();
+            await wait();
             fix.detectChanges();
 
             // Verify 'ReleaseDate' filter chip is fully visible.
@@ -2871,7 +2871,7 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
             gridRect = grid.nativeElement.getBoundingClientRect();
             expect(chipRect.left > gridRect.left && chipRect.right < gridRect.right).toBe(true,
                 'chip should be fully visible and within grid');
-        }));
+        });
 
         it('Verify condition chips are scrolled into/(out of) view by using arrow buttons.', (async () => {
             grid.width = '700px';