Merge pull request #14461 from IgniteUI/ganastasov/fix-14324-18.0.x

fix(for-of): correct content area recalculation - 18.0.x

Author: kdinev

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

@@ -802,7 +802,6 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
             || containerSize && endTopOffset - containerSize > 5;
     }
 
-
     /**
      * @hidden
      * Function that recalculates and updates cache sizes.
@@ -831,13 +830,13 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
                 const currDiff = newVal - oldVal;
                 diffs.push(currDiff);
                 totalDiff += currDiff;
-                this.sizesCache[index + 1] += totalDiff;
+                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] += totalDiff;
+                this.sizesCache[j] = (this.sizesCache[j] || 0) + totalDiff;
             }
 
             // update scrBar heights/widths

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.virtualization.spec.ts

@@ -14,6 +14,7 @@ import { IgxStringFilteringOperand } from '../../data-operations/filtering-condi
 import { GridFunctions } from '../../test-utils/grid-functions.spec';
 import { HierarchicalGridFunctions } from '../../test-utils/hierarchical-grid-functions.spec';
 import { IgxHierarchicalRowComponent } from './hierarchical-row.component';
+import { IgxHierarchicalGridDefaultComponent } from '../../test-utils/hierarchical-grid-components.spec';
 
 describe('IgxHierarchicalGrid Virtualization #hGrid', () => {
     let fixture;
@@ -22,7 +23,8 @@ describe('IgxHierarchicalGrid Virtualization #hGrid', () => {
         return TestBed.configureTestingModule({
             imports: [
                 NoopAnimationsModule,
-                IgxHierarchicalGridTestBaseComponent
+                IgxHierarchicalGridTestBaseComponent,
+                IgxHierarchicalGridDefaultComponent
             ]
         });
     }));
@@ -393,6 +395,43 @@ describe('IgxHierarchicalGrid Virtualization #hGrid', () => {
         expect(ri.gridScroll.emit).toHaveBeenCalled();
         expect(ri.dataPreLoad.emit).toHaveBeenCalled();
     });
+
+    it('should recalculate and update content correctly after filter is cleared, ensuring no empty areas post-filtering and scrolling', async () => {
+        // eslint-disable-next-line @typescript-eslint/no-shadow
+        const fixture = TestBed.createComponent(IgxHierarchicalGridDefaultComponent);
+        fixture.detectChanges();
+        // eslint-disable-next-line @typescript-eslint/no-shadow
+        const hierarchicalGrid = fixture.componentInstance.hierarchicalGrid;
+        fixture.detectChanges();
+        await wait(50);
+
+        hierarchicalGrid.filter('Artist', 'd', IgxStringFilteringOperand.instance().condition('contains'));
+        fixture.detectChanges();
+        await wait(50);
+
+        hierarchicalGrid.expandRow(6);
+        fixture.detectChanges();
+        await wait(50);
+
+        hierarchicalGrid.verticalScrollContainer.getScroll().scrollTop = 2000;
+        fixture.detectChanges();
+        await wait(50);
+
+        hierarchicalGrid.clearFilter();
+        fixture.detectChanges();
+        await wait(50);
+
+        hierarchicalGrid.verticalScrollContainer.getScroll().scrollTop = 2000;
+        fixture.detectChanges();
+        await wait(50);
+
+        const hierarchicalGridRect = hierarchicalGrid.tbody.nativeElement.getBoundingClientRect();
+        const lastRowRect = hierarchicalGrid.dataRowList.last.nativeElement.getBoundingClientRect();
+
+        const emptySpace = hierarchicalGridRect.bottom - lastRowRect.bottom;
+
+        expect(emptySpace).toBeLessThan(5);
+    });
 });
 
 describe('IgxHierarchicalGrid Virtualization Custom Scenarios #hGrid', () => {

projects/igniteui-angular/src/lib/test-utils/hierarchical-grid-components.spec.ts

@@ -687,3 +687,47 @@ class MyChildSummary {
         return result;
     }
 }
+
+@Component({
+    template: `
+    <igx-hierarchical-grid [data]="data" [autoGenerate]="false" [allowFiltering]='true'
+        [height]="'600px'" [width]="'100%'" [rowHeight]="'65px'" [primaryKey]="'ID'" #hierarchicalGrid>
+        <igx-column field="ID" [hidden]="true"></igx-column>
+        <igx-column field="Artist"></igx-column>
+        <igx-column field="Debut" dataType="number"></igx-column>
+        <igx-column field="GrammyNominations" header="Grammy Nominations" dataType="number"></igx-column>
+        <igx-column field="GrammyAwards" header="Grammy Awards" dataType="number"></igx-column>
+
+        <igx-row-island [height]="null" [key]="'Albums'" [autoGenerate]="false" [allowFiltering]='true'>
+            <igx-column field="Album"></igx-column>
+            <igx-column field="LaunchDate" header="Launch Date" [dataType]="'date'"></igx-column>
+            <igx-column field="BillboardReview" header="Billboard Review" dataType="number"></igx-column>
+            <igx-column field="USBillboard200" header="US Billboard 200" dataType="number"></igx-column>
+        <igx-row-island [height]="null" [key]="'Songs'" [autoGenerate]="false" >
+                <igx-column field="Number" header="No."></igx-column>
+                <igx-column field="Title"></igx-column>
+                <igx-column field="Released" dataType="date"></igx-column>
+                <igx-column field="Genre"></igx-column>
+        </igx-row-island>
+        </igx-row-island>
+
+        <igx-row-island [height]="null" [key]="'Tours'" [autoGenerate]="false" [allowFiltering]='true'>
+            <igx-column field="Tour"></igx-column>
+            <igx-column field="StartedOn" header="Started on"></igx-column>
+            <igx-column field="Location"></igx-column>
+            <igx-column field="Headliner"></igx-column>
+        </igx-row-island>
+    </igx-hierarchical-grid>`,
+    standalone: true,
+    imports: [IgxHierarchicalGridComponent, IgxColumnComponent, IgxRowIslandComponent]
+})
+export class IgxHierarchicalGridDefaultComponent {
+    @ViewChild('hierarchicalGrid', { read: IgxHierarchicalGridComponent, static: true })
+    public hierarchicalGrid: IgxHierarchicalGridComponent;
+
+    public data;
+
+    constructor() {
+        this.data = SampleTestData.hierarchicalGridSingersFullData();
+    }
+}