Skip to content
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

fix(cdk-experimental/column-resize): Fix lazy resize mode (broken by … #30413

Merged
merged 1 commit into from
Jan 31, 2025
Merged

fix(cdk-experimental/column-resize): Fix lazy resize mode (broken by … #30413

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
3 changes: 3 additions & 0 deletions src/cdk-experimental/column-resize/column-resize.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,9 @@ export abstract class ColumnResize implements AfterViewInit, OnDestroy {
/** The id attribute of the table, if specified. */
id?: string;

/** @docs-private Whether a call to updateStickyColumnStyles is pending after a resize. */
_flushPending = false;

/**
* Whether to update the column's width continuously as the mouse position
* changes, or to wait until mouseup to apply the new size.
Expand Down
29 changes: 8 additions & 21 deletions src/cdk-experimental/column-resize/resize-strategy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ export abstract class ResizeStrategy implements OnDestroy {
protected abstract readonly styleScheduler: _CoalescedStyleScheduler;
protected abstract readonly table: CdkTable<unknown>;

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

/** Adjusts the width of the table element by the specified delta. */
protected updateTableWidthAndStickyColumns(delta: number): void {
if (this._pendingResizeDelta === null) {
const tableElement = this.columnResize.elementRef.nativeElement;
const tableWidth = this.getElementWidth(tableElement);
this.columnResize._flushPending = true;

this.styleScheduler.schedule(() => {
tableElement.style.width = coerceCssPixelValue(tableWidth + this._pendingResizeDelta!);

this._pendingResizeDelta = null;
});

this.styleScheduler.scheduleEnd(() => {
// Once the column sizes have updated, we unset the table width so that
// it does not have unwanted side effects on future changes in the table
// such as columns being added or removed.
tableElement.style.width = '';

this.table.updateStickyColumnStyles();
});
}

this._pendingResizeDelta = (this._pendingResizeDelta ?? 0) + delta;
this.styleScheduler.scheduleEnd(() => {
if (!this.columnResize._flushPending) {
return;
}
this.columnResize._flushPending = false;
this.table.updateStickyColumnStyles();
});
}

/** Gets the style.width pixels on the specified element if present, otherwise its offsetWidth. */
Expand Down
2 changes: 2 additions & 0 deletions src/material-experimental/column-resize/_column-resize-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@
// Required for resizing to work properly.
.mat-column-resize-table.cdk-column-resize-with-resized-column {
table-layout: fixed;
// stylelint-disable-next-line material/no-prefixes -- Valid in all remotely recent browsers.
width: fit-content;
}

.mat-column-resize-flex {
Expand Down
Loading