fix(grid): prevent NaN column width when hidden grid has all columns sized - #17457
Conversation
There was a problem hiding this comment.
Pull request overview
Fixes a grid column autosizing edge case where getPossibleColumnWidth() could divide by zero when all visible columns already have explicit/constrained widths, which—especially for grids hidden via a wrapper (display: none) and without an explicit grid width—could yield NaN/Infinity and poison cached column width calculations.
Changes:
- Added a guard in
getPossibleColumnWidth()to return the grid’s default minimum column width whencolumnsToSize <= 0, avoiding division by zero. - Added a unit test reproducing the hidden-wrapper scenario to ensure no
NaNwidth is produced and cached pixel widths remain finite.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
projects/igniteui-angular/grids/grid/src/grid-base.directive.ts |
Prevents NaN/Infinity possible-width derivation by early-returning a safe fallback when no columns remain to auto-size. |
projects/igniteui-angular/grids/grid/src/column.spec.ts |
Adds a regression test covering the hidden-wrapper + all-columns-sized scenario and validates computed widths remain finite. |
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 2 out of 2 changed files in this pull request and generated no new comments.
Comments suppressed due to low confidence (1)
projects/igniteui-angular/grids/grid/src/grid-base.directive.ts:5647
getPossibleColumnWidth()still divides bycolumnsToSizewithout guaranteeing it’s > 0. The new guard only coversisColumnWidthSum, butcolumnsToSizecan also be 0 (or negative) when all visible columns have explicit/constrained widths even with a measurable grid width, leading toInfinity/NaNwidths and poisoning_columnWidth/defaultWidth caches. Consider short-circuiting whenevercolumnsToSize <= 0to avoid the division entirely.
// 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 equals sumExistingWidths, resulting in 0 / 0 = NaN. | ||
| // Return the "0px" sentinel so _derivePossibleWidth() preserves the existing | ||
| // valid column widths. | ||
| if (columnsToSize <= 0 && this.isColumnWidthSum) { |
There was a problem hiding this comment.
Bit late & likely not an that much of an issue since the measures probably run again (possibly even more than once 🥲) when the grid is shown, but I remember there was some min (136px?) assigned for columns by default.
In case that'll spare parts of next ops, might consider returning that min instead of 0, with the hope that in a the future where we've reduced the calculations, the column is more likely to settle on the min instead. I see 0 is already used for another case as well, so this fix is fine, just food for thought :)
Closes #17418
Description
getPossibleColumnWidth()divided the available width bycolumnsToSizewhen every visible column already had an explicit or constrained width.When the grid is hidden through a wrapper and has no measurable width,
calcWidthfalls back to the sum of the column widths. In this case,computedWidthequalssumExistingWidthsandcolumnsToSizeis0, resulting in0 / 0 = NaN. This then poisons the cached column widths and can cause an infinite sizing loop.When the grid is using the column-width sum fallback and there are no columns left to auto-size, return the
"0px"sentinel so the existing valid column widths are preserved.Motivation / Context
Type of Change (check all that apply):
Component(s) / Area(s) Affected:
How Has This Been Tested?
Test Configuration:
Screenshots / Recordings
Checklist:
feature/README.MDupdates for the feature docsREADME.MDCHANGELOG.MDupdates for newly added functionalityng updatemigrations for the breaking changes (migrations guidelines)