From 36f43651633f0d7eda6e2568eb3717bd70b94e75 Mon Sep 17 00:00:00 2001 From: Viktor Kombov Date: Fri, 24 Jul 2026 16:34:25 +0300 Subject: [PATCH 1/2] fix(grid): prevent NaN column width when hidden grid has all columns sized --- .../grids/grid/src/column.spec.ts | 49 ++++++++++++++++++- .../grids/grid/src/grid-base.directive.ts | 10 ++++ 2 files changed, 57 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/grids/grid/src/column.spec.ts b/projects/igniteui-angular/grids/grid/src/column.spec.ts index a7603d545b9..c03b88729ff 100644 --- a/projects/igniteui-angular/grids/grid/src/column.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/column.spec.ts @@ -1,4 +1,4 @@ -import { Component, DebugElement, TemplateRef, ViewChild, provideZonelessChangeDetection } from '@angular/core'; +import { Component, DebugElement, TemplateRef, ViewChild, ChangeDetectionStrategy, provideZonelessChangeDetection } from '@angular/core'; import { TestBed, fakeAsync, tick, waitForAsync, ComponentFixture } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { getLocaleCurrencySymbol, registerLocaleData } from '@angular/common'; @@ -51,7 +51,8 @@ describe('IgxGrid - Column properties #grid', () => { TemplatedContextInputColumnsComponent, ColumnHaederClassesComponent, ResizableColumnsComponent, - DOMAttributesAsSettersComponent + DOMAttributesAsSettersComponent, + GridInToggleableWrapperComponent ] }).compileComponents(); })); @@ -325,6 +326,29 @@ describe('IgxGrid - Column properties #grid', () => { expect(grid.columnList.get(1).width).toBe('300px'); }); + it('should not derive a NaN column width when the grid is hidden through its wrapper and all columns are sized', () => { + const fix = TestBed.createComponent(GridInToggleableWrapperComponent); + fix.detectChanges(); + + const grid = fix.componentInstance.grid; + + // Hide the grid through its wrapper (display: none) and force a size recalculation. + // With no width set, the hidden grid falls back to summing its column widths for + // calcWidth, so computedWidth equals sumExistingWidths while columnsToSize is 0. + fix.componentInstance.wrapperHidden = true; + fix.detectChanges(); + grid.reflow(); + fix.detectChanges(); + + const possibleWidth = grid.getPossibleColumnWidth(); + expect(possibleWidth).not.toContain('NaN'); + expect(Number.isFinite(parseFloat(possibleWidth))).toBe(true); + + // the minWidth column must keep a valid, finite pixel width rather than being poisoned by NaN + const minWidthColumn = grid.getColumnByName('field15'); + expect(Number.isFinite(minWidthColumn.calcPixelWidth)).toBe(true); + }); + it('should support passing templates through the markup as an input property', () => { const fixture = TestBed.createComponent(TemplatedInputColumnsComponent); fixture.detectChanges(); @@ -1962,3 +1986,24 @@ describe('IgxGrid column autosizing in zoneless change detection #grid', () => { expect(grid.columns[1].width).toBe('279px'); }); }); +@Component({ + template: ` +
+ + + + +
+ `, + imports: [IgxGridComponent, IgxColumnComponent] +}) +export class GridInToggleableWrapperComponent { + @ViewChild('grid', { read: IgxGridComponent, static: true }) + public grid: IgxGridComponent; + + public wrapperHidden = false; + public data = [ + { id: 1, field15: 'lorem' }, + { id: 2, field15: 'ipsum' } + ]; +} diff --git a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts index fa141d090b9..d080cdcf5e9 100644 --- a/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts +++ b/projects/igniteui-angular/grids/grid/src/grid-base.directive.ts @@ -5658,6 +5658,16 @@ export abstract class IgxGridBaseDirective implements GridType, return '0px'; } + // When the grid has no measurable width, calculateGridWidth() falls back to the + // sum of its column widths and sets isColumnWidthSum. If all visible columns + // already have explicit or constrained widths, columnsToSize is 0 and + // computedWidth equals sumExistingWidths, resulting in 0 / 0 = NaN. + // Return the "0px" sentinel so _derivePossibleWidth() preserves the existing + // valid column widths. + if (columnsToSize <= 0 && this.isColumnWidthSum) { + return '0px'; + } + computedWidth -= this.featureColumnsWidth(); const columnWidth = !Number.isFinite(sumExistingWidths) ? From 1e153034a96e3e7c2f403bad7e5099405034cccf Mon Sep 17 00:00:00 2001 From: Viktor Kombov <75325639+viktorkombov@users.noreply.github.com> Date: Fri, 24 Jul 2026 16:54:35 +0300 Subject: [PATCH 2/2] Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- projects/igniteui-angular/grids/grid/src/column.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/grids/grid/src/column.spec.ts b/projects/igniteui-angular/grids/grid/src/column.spec.ts index c03b88729ff..7c6ada02b9d 100644 --- a/projects/igniteui-angular/grids/grid/src/column.spec.ts +++ b/projects/igniteui-angular/grids/grid/src/column.spec.ts @@ -1,4 +1,4 @@ -import { Component, DebugElement, TemplateRef, ViewChild, ChangeDetectionStrategy, provideZonelessChangeDetection } from '@angular/core'; +import { Component, DebugElement, TemplateRef, ViewChild, provideZonelessChangeDetection } from '@angular/core'; import { TestBed, fakeAsync, tick, waitForAsync, ComponentFixture } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { getLocaleCurrencySymbol, registerLocaleData } from '@angular/common';