From bc9b9839225110860a7ee0d22b1ca7a3de9ef30f Mon Sep 17 00:00:00 2001
From: Karl Seamon <bannanafiend@gmail.com>
Date: Wed, 29 Jan 2025 11:21:40 -0500
Subject: [PATCH] fix(cdk-experimental/column-resize): Fix lazy resize mode
 (broken by ##30378)

---
 .../column-resize/column-resize.ts            |  3 ++
 .../column-resize/resize-strategy.ts          | 29 +++++--------------
 .../column-resize/_column-resize-theme.scss   |  2 ++
 3 files changed, 13 insertions(+), 21 deletions(-)

diff --git a/src/cdk-experimental/column-resize/column-resize.ts b/src/cdk-experimental/column-resize/column-resize.ts
index af249ac5e56f..cba092eff599 100644
--- 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
index 372e35baa659..854c603b332b 100644
--- 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
index 4bda0a7e66d9..a9715bb33772 100644
--- 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 {