From b21a0734da174f9c7ab4d6cbd44e171253c1e812 Mon Sep 17 00:00:00 2001
From: MKirova <MKirova@DEV-MKIROVA>
Date: Wed, 10 Jul 2024 17:04:52 +0300
Subject: [PATCH 1/2] fix(igxGrid): Fix issue with group expanding container.

---
 .../src/lib/grids/headers/grid-header-group.component.html    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html b/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html
index 83599eef638..b4345bdb44e 100644
--- a/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html
+++ b/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html
@@ -70,8 +70,8 @@
                 [ngClass]="child.headerGroupClasses"
                 [ngStyle]="child.headerGroupStyles | igxHeaderGroupStyle:child:grid.pipeTrigger"
                 [column]="child"
-                [style.min-width]="child.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:grid.hasColumnLayouts"
-                [style.flex-basis]="child.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:grid.hasColumnLayouts">
+                [style.min-width]="child.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:grid.hasColumnLayouts"
+                [style.flex-basis]="child.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:grid.hasColumnLayouts">
             </igx-grid-header-group>
         </ng-container>
     </div>

From 864352496879f43d2a9421a57c3aadb0db658896 Mon Sep 17 00:00:00 2001
From: MKirova <MKirova@DEV-MKIROVA>
Date: Wed, 10 Jul 2024 17:27:21 +0300
Subject: [PATCH 2/2] chore(*): Add a column group with auto size test.

---
 .../src/lib/grids/grid/grid.component.spec.ts | 46 ++++++++++++++++++-
 1 file changed, 45 insertions(+), 1 deletion(-)

diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts
index 299652be902..5d0d1b12c9a 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts
@@ -26,7 +26,7 @@ import { ISortingExpression, SortingDirection } from '../../data-operations/sort
 import { GRID_SCROLL_CLASS } from '../../test-utils/grid-functions.spec';
 import { AsyncPipe, NgFor, NgIf } from '@angular/common';
 import { IgxPaginatorComponent, IgxPaginatorContentDirective } from '../../paginator/paginator.component';
-import { IGridRowEventArgs, IgxGridFooterComponent, IgxGridRow, IgxGroupByRow, IgxSummaryRow } from '../public_api';
+import { IGridRowEventArgs, IgxColumnGroupComponent, IgxGridFooterComponent, IgxGridRow, IgxGroupByRow, IgxSummaryRow } from '../public_api';
 import { getComponentSize } from '../../core/utils';
 
 
@@ -1896,6 +1896,20 @@ describe('IgxGrid Component Tests #grid', () => {
 
             expect(calcWidth).not.toBe(80);
         });
+
+        it('should correctly autosize column headers inside column groups.', async () => {
+            const fix = TestBed.createComponent(IgxGridColumnHeaderInGroupAutoSizeComponent);
+            const grid = fix.componentInstance.grid;
+            grid.data = [{field1: "Test"}];
+
+            //waiting for reqeustAnimationFrame to finish
+            fix.detectChanges();
+            await wait(17);
+            fix.detectChanges();
+
+            const calcWidth = parseInt(grid.getColumnByName("field1").calcWidth);
+            expect(calcWidth).toBe(126);
+        });
     });
 
     describe('IgxGrid - API methods', () => {
@@ -2962,6 +2976,36 @@ export class IgxGridColumnHeaderAutoSizeComponent {
 
 }
 
+@Component({
+    template: `
+    <igx-grid #grid>
+    <igx-column-group>
+      <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-column-group>
+    </igx-grid>`,
+    standalone: true,
+    imports: [IgxGridComponent, IgxColumnComponent, IgxColumnGroupComponent]
+
+})
+export class IgxGridColumnHeaderInGroupAutoSizeComponent {
+    @ViewChild('grid', { read: IgxGridComponent, static: true })
+    public grid: IgxGridComponent;
+}
+
 @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">