fix(for-of): correct content sizesCache recalculation

Author: georgianastasov

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

@@ -803,52 +803,69 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
      * Function that recalculates and updates cache sizes.
      */
     public recalcUpdateSizes() {
-        const dimension = this.igxForScrollOrientation === 'horizontal' ? this.igxForSizePropName : 'height';
+        const dimension = this.igxForScrollOrientation === 'horizontal' ?
+            this.igxForSizePropName : 'height';
         const diffs = [];
         let totalDiff = 0;
         const l = this._embeddedViews.length;
-
         const rNodes = this._embeddedViews.map(view =>
             view.rootNodes.find(node => node.nodeType === Node.ELEMENT_NODE) || view.rootNodes[0].nextElementSibling);
-
         for (let i = 0; i < l; i++) {
             const rNode = rNodes[i];
             if (rNode) {
                 const height = window.getComputedStyle(rNode).getPropertyValue('height');
-                const h = parseFloat(height);
+                const h = parseFloat(height) || parseInt(this.igxForItemSize, 10);
                 const index = this.state.startIndex + i;
-
                 if (!this.isRemote && !this.igxForOf[index]) {
                     continue;
                 }
-
-                const oldVal = this.individualSizeCache[index] || 0;
-                const newVal = h + this.getMargin(rNode, dimension);
+                const margin = this.getMargin(rNode, dimension);
+                const oldVal = this.individualSizeCache[index];
+                const newVal = (dimension === 'height' ? h : rNode.clientWidth) + margin;
                 this.individualSizeCache[index] = newVal;
                 const currDiff = newVal - oldVal;
                 diffs.push(currDiff);
                 totalDiff += currDiff;
-
-                this.sizesCache[index + 1] = this.sizesCache[index] + newVal;
+                this.sizesCache[index + 1] = (this.sizesCache[index] || 0) + newVal;
             }
         }
+        // update cache
+        if (Math.abs(totalDiff) > 0) {
+            for (let j = this.state.startIndex + this.state.chunkSize + 1; j < this.sizesCache.length; j++) {
+                this.sizesCache[j] = (this.sizesCache[j] || 0) + totalDiff;
+            }
 
-        for (let j = this.state.startIndex + this.state.chunkSize + 1; j < this.sizesCache.length; j++) {
-            this.sizesCache[j] += totalDiff;
-        }
-
-        const oldScrollSize = this.scrollComponent.size;
-        this.scrollComponent.size = this._calcSize();
-
-        if (this.scrollComponent.size !== oldScrollSize) {
-            this._zone.run(() => {
-                this.scrollbarVisibilityChanged.emit();
-                this.contentSizeChange.emit();
-            });
-        }
+            // update scrBar heights/widths
+            const reducer = (acc, val) => acc + val;
 
-        if (Math.abs(totalDiff) > 0) {
-            this._adjustScrollPositionAfterSizeChange(totalDiff);
+            const hSum = this.individualSizeCache.reduce(reducer);
+            if (hSum > this._maxSize) {
+                this._virtRatio = hSum / this._maxSize;
+            }
+            this.scrollComponent.size = Math.min(this.scrollComponent.size + totalDiff, this._maxSize);
+            this._virtSize = hSum;
+            if (!this.scrollComponent.destroyed) {
+                this.scrollComponent.cdr.detectChanges();
+            }
+            const scrToBottom = this._isScrolledToBottom && !this.dc.instance.notVirtual;
+            if (scrToBottom && !this._isAtBottomIndex) {
+                const containerSize = parseInt(this.igxForContainerSize, 10);
+                const maxVirtScrollTop = this._virtSize - containerSize;
+                this._bScrollInternal = true;
+                this._virtScrollPosition = maxVirtScrollTop;
+                this.scrollPosition = maxVirtScrollTop;
+                return;
+            }
+            if (this._adjustToIndex) {
+                // in case scrolled to specific index where after scroll heights are changed
+                // need to adjust the offsets so that item is last in view.
+                const updatesToIndex = this._adjustToIndex - this.state.startIndex + 1;
+                const sumDiffs = diffs.slice(0, updatesToIndex).reduce(reducer);
+                if (sumDiffs !== 0) {
+                    this.addScroll(sumDiffs);
+                }
+                this._adjustToIndex = null;
+            }
         }
     }
 

projects/igniteui-angular/src/lib/grids/grid/grid.master-detail.spec.ts

@@ -590,13 +590,14 @@ describe('IgxGrid Master Detail #grid', () => {
             setupGridScrollDetection(fix, grid);
             const targetCellElement = grid.gridAPI.get_cell_by_index(0, 'ContactName');
             UIInteractions.simulateClickAndSelectEvent(targetCellElement);
+            await wait(DEBOUNCETIME);
             fix.detectChanges();
 
             UIInteractions.triggerEventHandlerKeyDown('End', gridContent, false, false, true);
-            await wait(DEBOUNCETIME);
             fix.detectChanges();
             await wait(DEBOUNCETIME);
             fix.detectChanges();
+            await wait(DEBOUNCETIME);
 
             const lastRow = grid.gridAPI.get_row_by_index(52);
             expect(lastRow).not.toBeUndefined();

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.navigation.spec.ts

@@ -645,23 +645,23 @@ describe('IgxHierarchicalGrid Navigation', () => {
             // eslint-disable-next-line @typescript-eslint/no-shadow
             const hierarchicalGrid = fixture.componentInstance.hierarchicalGrid;
             fixture.detectChanges();
-            await wait();
+            await wait(DEBOUNCE_TIME);
 
             hierarchicalGrid.filter('Artist', 'd', IgxStringFilteringOperand.instance().condition('contains'));
             fixture.detectChanges();
-            await wait();
+            await wait(DEBOUNCE_TIME);
 
             hierarchicalGrid.expandRow(6);
             fixture.detectChanges();
-            await wait();
+            await wait(DEBOUNCE_TIME);
 
             hierarchicalGrid.verticalScrollContainer.getScroll().scrollTop = 2000;
             fixture.detectChanges();
             await wait(DEBOUNCE_TIME);
 
             hierarchicalGrid.clearFilter();
             fixture.detectChanges();
-            await wait();
+            await wait(DEBOUNCE_TIME);
 
             hierarchicalGrid.verticalScrollContainer.getScroll().scrollTop = 2000;
             fixture.detectChanges();