From e6d866044ea683d5b7c7e8eb92e2762614b59f47 Mon Sep 17 00:00:00 2001
From: Tomi Virkki <tomivirkki@users.noreply.github.com>
Date: Thu, 11 Jan 2024 12:36:21 +0200
Subject: [PATCH] fix: wait for defined columns before measuring auto-width
 (#7064)

---
 packages/grid/src/vaadin-grid-mixin.js        | 11 ++++++-
 .../grid/test/column-auto-width.common.js     | 30 +++++++++++++++++++
 2 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/packages/grid/src/vaadin-grid-mixin.js b/packages/grid/src/vaadin-grid-mixin.js
index 4690e29eff..a25b20d9dd 100644
--- a/packages/grid/src/vaadin-grid-mixin.js
+++ b/packages/grid/src/vaadin-grid-mixin.js
@@ -484,7 +484,16 @@ export const GridMixin = (superClass) =>
         return;
       }
       const cols = this._getColumns().filter((col) => !col.hidden && col.autoWidth);
-      this._recalculateColumnWidths(cols);
+
+      const undefinedCols = cols.filter((col) => !customElements.get(col.localName));
+      if (undefinedCols.length) {
+        // Some of the columns are not defined yet, wait for them to be defined before measuring
+        Promise.all(undefinedCols.map((col) => customElements.whenDefined(col.localName))).then(() => {
+          this._recalculateColumnWidths(cols);
+        });
+      } else {
+        this._recalculateColumnWidths(cols);
+      }
     }
 
     /** @private */
diff --git a/packages/grid/test/column-auto-width.common.js b/packages/grid/test/column-auto-width.common.js
index 3fd146ac20..b6f661a370 100644
--- a/packages/grid/test/column-auto-width.common.js
+++ b/packages/grid/test/column-auto-width.common.js
@@ -222,6 +222,36 @@ describe('column auto-width', () => {
     expect(headerCell.getBoundingClientRect().width).to.be.closeTo(headerCellWidth, 5);
   });
 
+  it('should have correct column widths for lazily defined columns', async () => {
+    const tagName = 'vaadin-custom-column';
+    const newColumn = document.createElement(tagName);
+    newColumn.autoWidth = true;
+    newColumn.flexGrow = 0;
+    newColumn.path = 'a';
+
+    // Replace 'a' column with a new one
+    grid.removeChild(columns[0]);
+    grid.insertBefore(newColumn, columns[1]);
+    columns = grid.querySelectorAll(`${tagName}, vaadin-grid-column`);
+    grid.items = testItems;
+
+    // Define the custom column element after a delay
+    await new Promise((resolve) => {
+      setTimeout(() => {
+        customElements.define(
+          tagName,
+          class extends customElements.get('vaadin-grid-column') {
+            static is = tagName;
+          },
+        );
+        resolve();
+      }, 100);
+    });
+
+    await recalculateWidths();
+    expectColumnWidthsToBeOk(columns);
+  });
+
   describe('focusButtonMode column', () => {
     beforeEach(async () => {
       const column = document.createElement('vaadin-grid-column');