fix: prevent column width calculation when grid is not visible (#5876) (#5894)

* fix: prevent column width calculation when grid is not visible

* fix import

Author: sissbruecker

packages/grid/src/vaadin-grid.js

@@ -12,6 +12,7 @@ import { isAndroid, isChrome, isFirefox, isIOS, isSafari, isTouch } from '@vaadi
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { isElementHidden } from '@vaadin/component-base/src/focus-utils.js';
 import { TabindexMixin } from '@vaadin/component-base/src/tabindex-mixin.js';
 import { processTemplates } from '@vaadin/component-base/src/templates.js';
 import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
@@ -464,7 +465,15 @@ class Grid extends ElementMixin(
       reorderElements: true,
     });
 
-    new ResizeObserver(() => setTimeout(() => this.__updateFooterPositioning())).observe(this.$.footer);
+    new ResizeObserver(() =>
+      setTimeout(() => {
+        this.__updateFooterPositioning();
+        if (this._recalculateColumnWidthOnceVisible) {
+          this._recalculateColumnWidthOnceVisible = false;
+          this.recalculateColumnWidths();
+        }
+      }),
+    ).observe(this.$.table);
 
     processTemplates(this);
 
@@ -648,12 +657,16 @@ class Grid extends ElementMixin(
     if (!this._columnTree) {
       return; // No columns
     }
+    if (isElementHidden(this)) {
+      this._recalculateColumnWidthOnceVisible = true;
+      return;
+    }
     if (this._cache.isLoading()) {
       this._recalculateColumnWidthOnceLoadingFinished = true;
-    } else {
-      const cols = this._getColumns().filter((col) => !col.hidden && col.autoWidth);
-      this._recalculateColumnWidths(cols);
+      return;
     }
+    const cols = this._getColumns().filter((col) => !col.hidden && col.autoWidth);
+    this._recalculateColumnWidths(cols);
   }
 
   /** @private */

packages/grid/test/column-auto-width.test.js

@@ -44,6 +44,18 @@ describe('column auto-width', () => {
     });
   }
 
+  class TestContainer extends HTMLElement {
+    constructor() {
+      super();
+      this.attachShadow({ mode: 'open' });
+      this.shadowRoot.innerHTML = `
+        <slot name="custom-slot"></slot>
+      `;
+    }
+  }
+
+  customElements.define('test-container', TestContainer);
+
   beforeEach(async () => {
     grid = fixtureSync(`
       <vaadin-grid style="width: 600px; height: 200px;" hidden>
@@ -160,6 +172,31 @@ describe('column auto-width', () => {
     grid.recalculateColumnWidths();
     expectColumnWidthsToBeOk(columns, [114]);
   });
+
+  it('should defer calculating column widths when the grid is not visible', async () => {
+    grid.items = testItems;
+    await recalculateWidths();
+    expectColumnWidthsToBeOk(columns, [74]);
+
+    // Move grid to a custom element without setting proper slot name beforehand
+    // This reproduces a case in split-layout, which automatically applies slot
+    // names to children, but only after they have been connected. In this case
+    // columns should not resize while the grid is invisible, because their size
+    // would collapse to zero.
+    const container = fixtureSync('<test-container></test-container>');
+    container.appendChild(grid);
+
+    // Column widths should not have recalculated
+    await nextFrame();
+    expectColumnWidthsToBeOk(columns, [74]);
+
+    // Apply correct slot name
+    grid.slot = 'custom-slot';
+
+    // Column widths should recalculate, keeping the same width
+    await recalculateWidths();
+    expectColumnWidthsToBeOk(columns, [74]);
+  });
 });
 
 describe('tree column', () => {