Merge pull request #13624 from IgniteUI/iminchev/fix-header-autosize-15.1.x

fix(igxGrid): autosize hidden empty column headers correctly - 15.1.x

Author: kdinev

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

@@ -7382,13 +7382,13 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
                 }
                 const cells = this._dataRowList.map(x => x.cells.find(c => c.column === col));
                 cells.forEach((cell) => cellsContentWidths.push(cell?.nativeElement?.offsetWidth || 0));
+                const header = this.headerCellList.find(x => x.column === col);
+                cellsContentWidths.push(header.nativeElement.offsetWidth);
                 const max = Math.max(...cellsContentWidths);
                 if (max === 0) {
                     // cells not in DOM yet...
                     continue;
                 }
-                const header = this.headerCellList.find(x => x.column === col);
-                cellsContentWidths.push(header.nativeElement.offsetWidth);
                 let maxSize = Math.ceil(Math.max(...cellsContentWidths)) + 1;
                 if (col.maxWidth && maxSize > col.maxWidthPx) {
                     maxSize = col.maxWidthPx;

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

@@ -804,7 +804,8 @@ describe('IgxGrid Component Tests #grid', () => {
                     IgxGridColumnPercentageWidthComponent,
                     IgxGridWrappedInContComponent,
                     IgxGridFormattingComponent,
-                    IgxGridFixedContainerHeightComponent
+                    IgxGridFixedContainerHeightComponent,
+                    IgxGridColumnHeaderAutoSizeComponent
                 ],
                 imports: [
                     NoopAnimationsModule, IgxGridModule]
@@ -1865,6 +1866,23 @@ describe('IgxGrid Component Tests #grid', () => {
 
             expect(grid.columnList.get(0).width).toBe('50%');
         });
+
+        it('should correctly autosize column headers when the grid container has no data and is initially hidden and then shown', async () => {
+            const fix = TestBed.createComponent(IgxGridColumnHeaderAutoSizeComponent);
+            const grid = fix.componentInstance.grid;
+
+            //waiting for reqeustAnimationFrame to finish
+            await wait(17);
+            fix.detectChanges();
+
+            fix.componentInstance.gridContainerHidden = false;
+            await wait(17)
+            fix.detectChanges()
+
+            const calcWidth = parseInt(grid.columnList.first.calcWidth, 10)
+
+            expect(calcWidth).not.toBe(80);
+        });
     });
 
     describe('IgxGrid - API methods', () => {
@@ -2880,6 +2898,36 @@ export class IgxGridDefaultRenderingComponent {
     }
 }
 
+@Component({
+    template: `
+    <div [hidden]="gridContainerHidden">
+    <igx-grid #grid>
+      <igx-column
+        field="field1"
+        header="Field 1 Header"
+        width="auto"
+      ></igx-column>
+      <igx-column
+        field="field2"
+        header="Field 2 Header"
+        width="auto"
+      ></igx-column>
+      <igx-column
+        field="field3"
+        header="Field 3 Header"
+        width="auto"
+      ></igx-column>
+    </igx-grid>
+    </div>`,
+})
+export class IgxGridColumnHeaderAutoSizeComponent {
+    @ViewChild('grid', { read: IgxGridComponent, static: true })
+    public grid: IgxGridComponent;
+
+    public gridContainerHidden = true;
+
+}
+
 @Component({
     template: `<igx-grid #grid [data]="data" [width]="'500px'" (columnInit)="initColumns($event)">
         <igx-column *ngFor="let col of columns" [field]="col.key" [header]="col.key" [dataType]="col.dataType">