fix: recalculate column widths on initial item load with same data provider (#9859) (#9868)

Co-authored-by: Ugur Saglam <106508695+ugur-vaadin@users.noreply.github.com>

Author: vaadin-bot

packages/grid/src/vaadin-grid-column-auto-width-mixin.js

@@ -59,9 +59,15 @@ export const ColumnAutoWidthMixin = (superClass) =>
     }
 
     /** @private */
-    __flatSizeChangedAutoWidth() {
+    __flatSizeChangedAutoWidth(flatSize) {
       // Flat size changed, recalculate column widths if pending (asynchronously, to allow grid to render row elements first)
-      requestAnimationFrame(() => this.__tryToRecalculateColumnWidthsIfPending());
+      requestAnimationFrame(() => {
+        if (!!flatSize && !this.__hasHadRenderedRowsForColumnWidthCalculation) {
+          this.recalculateColumnWidths();
+        } else {
+          this.__tryToRecalculateColumnWidthsIfPending();
+        }
+      });
     }
 
     /**

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

@@ -353,6 +353,26 @@ describe('column auto-width', () => {
     expect(parseFloat(lastColumn.width)).not.to.be.lessThan(getCellIntrinsicWidth(frozenToEndHeaderCell));
   });
 
+  it('should recalculate column widths on initial item load without data provider change', async () => {
+    let items = [];
+    grid.dataProvider = (_, cb) => cb(items, items.length);
+    await nextFrame();
+
+    // Should recalculate once on initial load of items
+    spy.resetHistory();
+    items = [testItems[0], testItems[1]];
+    grid.size = items.length;
+    await nextFrame();
+    expect(spy.callCount).to.equal(1);
+
+    // Should not recalculate on further update of items
+    spy.resetHistory();
+    items = [...items, testItems[2]];
+    grid.size = items.length;
+    await nextFrame();
+    expect(spy.called).to.be.false;
+  });
+
   describe('focusButtonMode column', () => {
     beforeEach(async () => {
       const column = document.createElement('vaadin-grid-column');