Skip to content

Commit 151ff1a

Browse files
authoredJan 31, 2025··
fix(cdk-experimental/column-resize): Fix lazy resize mode (broken by ##30378) (#30413)
1 parent 2081cb9 commit 151ff1a

File tree

3 files changed

+13
-21
lines changed

3 files changed

+13
-21
lines changed
 

‎src/cdk-experimental/column-resize/column-resize.ts

+3
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,9 @@ export abstract class ColumnResize implements AfterViewInit, OnDestroy {
6565
/** The id attribute of the table, if specified. */
6666
id?: string;
6767

68+
/** @docs-private Whether a call to updateStickyColumnStyles is pending after a resize. */
69+
_flushPending = false;
70+
6871
/**
6972
* Whether to update the column's width continuously as the mouse position
7073
* changes, or to wait until mouseup to apply the new size.

‎src/cdk-experimental/column-resize/resize-strategy.ts

+8-21
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ export abstract class ResizeStrategy implements OnDestroy {
2323
protected abstract readonly styleScheduler: _CoalescedStyleScheduler;
2424
protected abstract readonly table: CdkTable<unknown>;
2525

26-
private _pendingResizeDelta: number | null = null;
2726
private _tableObserved = false;
2827
private _elemSizeCache = new WeakMap<HTMLElement, {width: number; height: number}>();
2928
private _resizeObserver = globalThis?.ResizeObserver
@@ -54,27 +53,15 @@ export abstract class ResizeStrategy implements OnDestroy {
5453

5554
/** Adjusts the width of the table element by the specified delta. */
5655
protected updateTableWidthAndStickyColumns(delta: number): void {
57-
if (this._pendingResizeDelta === null) {
58-
const tableElement = this.columnResize.elementRef.nativeElement;
59-
const tableWidth = this.getElementWidth(tableElement);
56+
this.columnResize._flushPending = true;
6057

61-
this.styleScheduler.schedule(() => {
62-
tableElement.style.width = coerceCssPixelValue(tableWidth + this._pendingResizeDelta!);
63-
64-
this._pendingResizeDelta = null;
65-
});
66-
67-
this.styleScheduler.scheduleEnd(() => {
68-
// Once the column sizes have updated, we unset the table width so that
69-
// it does not have unwanted side effects on future changes in the table
70-
// such as columns being added or removed.
71-
tableElement.style.width = '';
72-
73-
this.table.updateStickyColumnStyles();
74-
});
75-
}
76-
77-
this._pendingResizeDelta = (this._pendingResizeDelta ?? 0) + delta;
58+
this.styleScheduler.scheduleEnd(() => {
59+
if (!this.columnResize._flushPending) {
60+
return;
61+
}
62+
this.columnResize._flushPending = false;
63+
this.table.updateStickyColumnStyles();
64+
});
7865
}
7966

8067
/** Gets the style.width pixels on the specified element if present, otherwise its offsetWidth. */

‎src/material-experimental/column-resize/_column-resize-theme.scss

+2
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@
1010
// Required for resizing to work properly.
1111
.mat-column-resize-table.cdk-column-resize-with-resized-column {
1212
table-layout: fixed;
13+
// stylelint-disable-next-line material/no-prefixes -- Valid in all remotely recent browsers.
14+
width: fit-content;
1315
}
1416

1517
.mat-column-resize-flex {

0 commit comments

Comments
 (0)
Please sign in to comment.