Merge pull request #14355 from IgniteUI/mkirova/fix-14138-18.0.x

fix(igxGrid): Enable check for whether container size changes when gr…

Author: dkamburov

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

@@ -924,6 +924,19 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
         }
     }
 
+
+    /**
+     * @hidden
+     * @internal
+     */
+    public updateScroll(): void {
+        if (this.igxForScrollOrientation === "horizontal") {
+            const scrollAmount = this.scrollComponent.nativeElement["scrollLeft"];
+            this.scrollComponent.scrollAmount = scrollAmount;
+            this._updateScrollOffset();
+        }
+    }
+
     protected updateSizes() {
         if (!this.scrollComponent.nativeElement.isConnected) return;
         const scrollable = this.isScrollable();

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -3628,6 +3628,7 @@ export abstract class IgxGridBaseDirective implements GridType,
             // the vert. scrollbar showing/hiding
             this.notifyChanges(true);
             this.cdr.detectChanges();
+            Promise.resolve().then(() => this.headerContainer.updateScroll());
         });
 
 
@@ -6312,12 +6313,8 @@ export abstract class IgxGridBaseDirective implements GridType,
         // in case state is no longer valid - update it.
         const rowForOf = row.virtDirRow;
         const gridScrLeft = rowForOf.getScroll().scrollLeft;
-        const left = -parseInt(rowForOf.dc.instance._viewContainer.element.nativeElement.style.left, 10);
-        const actualScrollLeft = left + rowForOf.getColumnScrollLeft(rowForOf.state.startIndex);
-        if (gridScrLeft !== actualScrollLeft) {
-            rowForOf.onHScroll(gridScrLeft);
-            rowForOf.cdr.detectChanges();
-        }
+        rowForOf.onHScroll(gridScrLeft);
+        rowForOf.cdr.detectChanges();
     }
 
     protected changeRowEditingOverlayStateOnScroll(row: RowType) {
@@ -6864,7 +6861,7 @@ export abstract class IgxGridBaseDirective implements GridType,
         let res = !parentElement ||
             parentElement.clientHeight === 0 ||
             parentElement.clientHeight === renderedHeight;
-        if ((!this.platform.isChromium && !this.platform.isFirefox) || this._autoSize) {
+        if (parentElement && (res || this._autoSize)) {
             // If grid causes the parent container to extend (for example when container is flex)
             // we should always auto-size since the actual size of the container will continuously change as the grid renders elements.
             this._autoSize = false;

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

@@ -1446,6 +1446,20 @@ describe('IgxGrid Component Tests #grid', () => {
             fix.componentInstance.data = fix.componentInstance.fullData;
         }));
 
+        it('should not auto-size when container has display:contents and size is determinable ', fakeAsync(() => {
+            const fix = TestBed.createComponent(IgxGridWrappedInContComponent);
+            fix.componentInstance.display = "contents";
+            fix.componentInstance.data = fix.componentInstance.fullData;
+            tick();
+            fix.detectChanges();
+            const defaultHeight = fix.debugElement.query(By.css(TBODY_CLASS)).styles.height;
+            const defaultHeightNum = parseInt(defaultHeight, 10);
+            expect(defaultHeight).not.toBeFalsy();
+
+            expect(defaultHeightNum).toBeGreaterThan(fix.componentInstance.grid.renderedRowHeight * 10);
+            expect(fix.componentInstance.grid.calcHeight).toBeGreaterThan(fix.componentInstance.grid.renderedRowHeight * 10);
+        }));
+
         it('should render correct columns if after scrolling right container size changes so that all columns become visible.',
             async () => {
                 const fix = TestBed.createComponent(IgxGridDefaultRenderingComponent);
@@ -3015,7 +3029,7 @@ export class IgxGridWithCustomFooterComponent extends IgxGridTestComponent {
     public override data = SampleTestData.foodProductData();
 }
 @Component({
-    template: `<div [style.width.px]="outerWidth" [style.height.px]="outerHeight">
+    template: `<div [style.display]="display" [style.width.px]="outerWidth" [style.height.px]="outerHeight">
             <igx-grid #grid [data]="data" [autoGenerate]="true">
                 <igx-paginator *ngIf="paging" [perPage]="pageSize"></igx-paginator>
             </igx-grid>
@@ -3065,6 +3079,7 @@ export class IgxGridWrappedInContComponent extends IgxGridTestComponent {
     public pageSize = 5;
     public outerWidth = 800;
     public outerHeight: number;
+    public display: string = "";
 }
 
 @Component({

src/app/grid-auto-size/grid-auto-size.sample.html

@@ -1,10 +1,12 @@
-<div class="wrapper">
-    <div class="sample-content">
-        <div class="sample-column">
+<div class="wrapper" style="width:100%; height:100%;">
+    <div class="sample-content" style="width:100%; height:100%;">
+        <div class="sample-column" style="width:100%; height:100%;">
             <div class="density-chooser">
                 <igx-buttongroup [values]="sizes" (selected)="selectDensity($event)"></igx-buttongroup>
             </div>
             <div>
+                <button igxButton="contained" (click)="gridContainer.style.display = 'contents'">Set container display: contents</button>
+                <button igxButton="contained" (click)="gridContainer.style.display = 'block'">Set container display: block</button>
                 <button igxButton="contained" (click)="gridContainerHidden = !gridContainerHidden">Toggle Container Visibility</button>
                 <button igxButton="contained" (click)="containerHeight = '400px'">Set container height px</button>
                 <button igxButton="contained" (click)="containerHeight = '100%'">Set container height %</button>
@@ -19,7 +21,7 @@
                 <button igxButton="contained" (click)="setData(0)">Set no data</button>
                 <button igxButton="contained" (click)="checkCols()">Check cols</button>
             </div>
-            <div [hidden]="gridContainerHidden" [style.height]="containerHeight">
+            <div #gridContainer [hidden]="gridContainerHidden" [style.height]="containerHeight">
             <igx-grid
                 #grid1
                 [data]="data"