Skip to content

Commit

Permalink
fix(cdk-experimental/column-resize): Ensure resizable entity is not d…
Browse files Browse the repository at this point in the history
…estroyed before applying min/max update (#24007)

The styleSchedule.scheduleEnd() function will sometimes call the provided callback after the nativeElement has been destroyed. The width of this nativeElement is used in the _apply(Min/Max)WidthPx functions to calculate a width diff. If the nativeElement has already been destroyed, the "current" width of the element is 0 so the column effectively doubles in width even though it technically didn't change. This width change is propagated up to the table which increases its size to account for the increased column width.

If the element has been destroyed, we can just ignore any resize logic pertaining to that old column since it should no longer affect the table's width. A newer version of that entity should make the change if necessary.
  • Loading branch information
biggs0125 committed Dec 3, 2021
1 parent e219008 commit 35cdf7c
Showing 1 changed file with 3 additions and 0 deletions.
3 changes: 3 additions & 0 deletions src/cdk-experimental/column-resize/resizable.ts
Expand Up @@ -67,6 +67,7 @@ export abstract class Resizable<HandleComponent extends ResizeOverlayHandle>
protected abstract readonly changeDetectorRef: ChangeDetectorRef;

private _viewInitialized = false;
private _isDestroyed = false;

/** The minimum width to allow the column to be sized to. */
get minWidthPx(): number {
Expand Down Expand Up @@ -100,13 +101,15 @@ export abstract class Resizable<HandleComponent extends ResizeOverlayHandle>
this._appendInlineHandle();

this.styleScheduler.scheduleEnd(() => {
if (this._isDestroyed) return;
this._viewInitialized = true;
this._applyMinWidthPx();
this._applyMaxWidthPx();
});
}

ngOnDestroy(): void {
this._isDestroyed = true;
this.destroyed.next();
this.destroyed.complete();
this.inlineHandle?.remove();
Expand Down

0 comments on commit 35cdf7c

Please sign in to comment.