Skip to content

fix: footer-row lifecycle - construction crash, inconsistent getFooterRow, double onFooterRowCellRendered #2672

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ghiscoding merged 1 commit into from
Aug 3, 2026
+19 −52
Merged

fix: footer-row lifecycle - construction crash, inconsistent getFooterRow, double onFooterRowCellRendered #2672

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions packages/common/src/core/__tests__/slickGrid.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1407,7 +1407,7 @@ describe('SlickGrid core file', () => {
vi.spyOn(grid, 'getDataLength').mockReturnValueOnce(-1);
grid.updateRowCount();

expect(onBeforeFooterRowCellDestroySpy).toHaveBeenCalledTimes(4); // 2x left and 2x right, because we have 2x columns
expect(onBeforeFooterRowCellDestroySpy).toHaveBeenCalledTimes(2); // because we have 2x columns
footerElms = container.querySelectorAll<HTMLDivElement>('.slick-footerrow');
expect(footerElms[0].style.display).not.toBe('none');
expect(footerElms[1].style.display).not.toBe('none');
Expand Down Expand Up @@ -1611,7 +1611,7 @@ describe('SlickGrid core file', () => {

expect(grid.getRowCache()).toEqual({});
expect(onBeforeRemoveCachedRowSpy).toHaveBeenCalledTimes(4);
expect(onBeforeFooterRowCellDestroySpy).toHaveBeenCalledTimes(4); // 2x left and 2x right, because we have 2x columns
expect(onBeforeFooterRowCellDestroySpy).toHaveBeenCalledTimes(2); // because we have 2x columns
footerElms = container.querySelectorAll<HTMLDivElement>('.slick-footerrow');
expect(footerElms[0].style.display).not.toBe('none');
expect(footerElms[1].style.display).not.toBe('none');
Expand Down Expand Up @@ -1643,7 +1643,7 @@ describe('SlickGrid core file', () => {
grid.setFooterRowVisibility(true);
grid.updateColumns(); // this will trigger onBeforeFooterRowCellDestroySpy

expect(onBeforeFooterRowCellDestroySpy).toHaveBeenCalledTimes(4); // 2x left and 2x right, because we have 2x columns
expect(onBeforeFooterRowCellDestroySpy).toHaveBeenCalledTimes(2); // because we have 2x columns
footerElms = container.querySelectorAll<HTMLDivElement>('.slick-footerrow');
expect(footerElms[0].style.display).not.toBe('none');
expect(footerElms[1].style.display).not.toBe('none');
Expand Down
65 changes: 16 additions & 49 deletions packages/common/src/core/slickGrid.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1671,6 +1671,8 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e

/** Get the Footer DOM element */
getFooterRow(): HTMLDivElement | HTMLDivElement[] {
// return undefined consistently when there is no footer, instead of throwing on
// the non-frozen `_footerRow[0]` path while the frozen path returns undefined
return this.hasFrozenColumns() ? this._footerRow : this._footerRow?.[0];
}

Expand Down Expand Up @@ -1831,35 +1833,11 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
emptyElement(this._headerRowL);
emptyElement(this._headerRowR);

if (this._options.createFooterRow) {
const footerRowLColumnElements = this._footerRowL.querySelectorAll('.slick-footerrow-column');
footerRowLColumnElements.forEach((column) => {
const columnDef = Utils.storage.get(column, 'column');
if (columnDef) {
this.triggerEvent(this.onBeforeFooterRowCellDestroy, {
node: this,
column: columnDef,
grid: this,
});
}
});
emptyElement(this._footerRowL);

if (this.hasFrozenColumns()) {
const footerRowRColumnElements = this._footerRowR.querySelectorAll('.slick-footerrow-column');
footerRowRColumnElements.forEach((column) => {
const columnDef = Utils.storage.get(column, 'column');
if (columnDef) {
this.triggerEvent(this.onBeforeFooterRowCellDestroy, {
node: this,
column: columnDef,
grid: this,
});
}
});
emptyElement(this._footerRowR);
}
}
// NOTE: footer-row destroy/create is handled entirely by createColumnFooter(),
// which is always called immediately after createColumnHeaders(). The duplicate
// footer blocks that used to live here fired onFooterRowCellRendered twice per
// column and emptied the right footer only under hasFrozenColumns() (leaving
// stale right-footer cells after un-freezing).

for (let i = 0, ln = this.columns.length; i < ln; i++) {
const m: C = this.columns[i];
Expand Down Expand Up @@ -1987,25 +1965,8 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
grid: this,
});
}
if (this._options.createFooterRow && this._options.showFooterRow) {
const footerRowTarget = this.hasFrozenColumns()
? i <= this._options.frozenColumn!
? this._footerRow[0]
: this._footerRow[1]
: this._footerRow[0];
const footerRowCell = createDomElement(
'div',
{ className: `slick-state-default slick-footerrow-column l${i} r${i}` },
footerRowTarget
);
Utils.storage.put(footerRowCell, 'column', m);

this.triggerEvent(this.onFooterRowCellRendered, {
node: footerRowCell,
column: m,
grid: this,
});
}
// footer-row cells are created by createColumnFooter() (called right after), not here
}

this.setSortColumns(this.sortColumns);
Expand Down Expand Up @@ -4894,7 +4855,10 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
if (!this._options.autoHeight || this._options.frozenColumn !== -1) {
this.topPanelH = this._options.showTopPanel ? this._options.topPanelHeight! + this.getVBoxDelta(this._topPanelScrollers[0]) : 0;
this.headerRowH = this._options.showHeaderRow ? this._options.headerRowHeight! + this.getVBoxDelta(this._headerRowScroller[0]) : 0;
this.footerRowH = this._options.showFooterRow ? this._options.footerRowHeight! + this.getVBoxDelta(this._footerRowScroller[0]) : 0;
this.footerRowH =
this._options.createFooterRow && this._options.showFooterRow
? this._options.footerRowHeight! + this.getVBoxDelta(this._footerRowScroller[0])
: 0;
}

if (this._options.autoHeight) {
Expand All @@ -4903,7 +4867,10 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
? this._options.preHeaderPanelHeight! + this.getVBoxDelta(this._preHeaderPanelScroller)
: 0;
fullHeight += this._options.showHeaderRow ? this._options.headerRowHeight! + this.getVBoxDelta(this._headerRowScroller[0]) : 0;
fullHeight += this._options.showFooterRow ? this._options.footerRowHeight! + this.getVBoxDelta(this._footerRowScroller[0]) : 0;
fullHeight +=
this._options.createFooterRow && this._options.showFooterRow
? this._options.footerRowHeight! + this.getVBoxDelta(this._footerRowScroller[0])
: 0;
fullHeight += this.getCanvasWidth() > this.viewportW ? this.scrollbarDimensions?.height || 0 : 0;

this.viewportH = this.getRowPosition(this.getDataLengthIncludingAddNew()) + (this._options.frozenColumn === -1 ? fullHeight : 0);
Expand Down
Loading