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

…ngular#30378)
kseamon · Jan 29, 2025 · bc9b983 · bc9b983
1 parent c1ff40f
commit bc9b983
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 21 deletions.
diff --git a/src/cdk-experimental/column-resize/column-resize.ts b/src/cdk-experimental/column-resize/column-resize.ts
@@ -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.

diff --git a/src/cdk-experimental/column-resize/resize-strategy.ts b/src/cdk-experimental/column-resize/resize-strategy.ts
@@ -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
@@ -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. */

diff --git a/src/material-experimental/column-resize/_column-resize-theme.scss b/src/material-experimental/column-resize/_column-resize-theme.scss
@@ -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 {