fix: wait for defined columns before measuring auto-width (#7064)

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 */

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');