From c60f2ae6b5584fee0f4964dd570e4d89ea7c5bac Mon Sep 17 00:00:00 2001
From: Tomi Virkki <tomivirkki@users.noreply.github.com>
Date: Tue, 17 Oct 2023 09:11:46 +0300
Subject: [PATCH] fix: update grid header and footer on column tree change
 (#6648)

---
 packages/grid/src/vaadin-grid-mixin.js | 28 ++++++++-------
 packages/grid/test/renderers.common.js | 49 +++++++++++++++++++++++++-
 2 files changed, 64 insertions(+), 13 deletions(-)

diff --git a/packages/grid/src/vaadin-grid-mixin.js b/packages/grid/src/vaadin-grid-mixin.js
index 0cd2ab5694..b0645e6d8f 100644
--- a/packages/grid/src/vaadin-grid-mixin.js
+++ b/packages/grid/src/vaadin-grid-mixin.js
@@ -879,6 +879,7 @@ export const GridMixin = (superClass) =>
       this.__updateFooterPositioning();
       this.generateCellClassNames();
       this.generateCellPartNames();
+      this.__updateHeaderAndFooter();
     }
 
     /** @private */
@@ -1001,19 +1002,22 @@ export const GridMixin = (superClass) =>
      * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
      */
     requestContentUpdate() {
-      if (this._columnTree) {
-        // Header and footer renderers
-        this._columnTree.forEach((level) => {
-          level.forEach((column) => {
-            if (column._renderHeaderAndFooter) {
-              column._renderHeaderAndFooter();
-            }
-          });
-        });
+      // Header and footer renderers
+      this.__updateHeaderAndFooter();
 
-        // Body and row details renderers
-        this.__updateVisibleRows();
-      }
+      // Body and row details renderers
+      this.__updateVisibleRows();
+    }
+
+    /** @private */
+    __updateHeaderAndFooter() {
+      (this._columnTree || []).forEach((level) => {
+        level.forEach((column) => {
+          if (column._renderHeaderAndFooter) {
+            column._renderHeaderAndFooter();
+          }
+        });
+      });
     }
 
     /** @protected */
diff --git a/packages/grid/test/renderers.common.js b/packages/grid/test/renderers.common.js
index 5451ce4608..ca9cbefa67 100644
--- a/packages/grid/test/renderers.common.js
+++ b/packages/grid/test/renderers.common.js
@@ -1,5 +1,5 @@
 import { expect } from '@esm-bundle/chai';
-import { fixtureSync, isIOS, keyDownOn } from '@vaadin/testing-helpers';
+import { fixtureSync, isIOS, keyDownOn, nextFrame } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import { flushGrid, getBodyCellContent, getCell, getContainerCell } from './helpers.js';
 
@@ -248,6 +248,53 @@ describe('renderers', () => {
 
       expect(headerCell._content.textContent).to.be.empty;
     });
+
+    it('should apply an update to hidden column header', async () => {
+      // Hide the column
+      column.hidden = true;
+      // Change the renderer
+      column.headerRenderer = (root) => {
+        root.textContent = 'foo';
+      };
+      await nextFrame();
+      // Unhide the column
+      column.hidden = false;
+      await nextFrame();
+
+      // Expect the header to be updated
+      expect(headerCell._content.textContent).to.eql('foo');
+    });
+
+    it('should apply updates to hidden column headers', async () => {
+      // Add another column
+      const newColumn = document.createElement('vaadin-grid-column');
+      newColumn.headerRenderer = (root) => {
+        root.textContent = 'header2';
+      };
+      grid.appendChild(newColumn);
+
+      // Hide both columns
+      column.hidden = true;
+      newColumn.hidden = true;
+
+      // Change the renderer of both columns
+      column.headerRenderer = (root) => {
+        root.textContent = 'foo';
+      };
+      newColumn.headerRenderer = (root) => {
+        root.textContent = 'bar';
+      };
+      await nextFrame();
+
+      // Unhide both columns
+      column.hidden = false;
+      newColumn.hidden = false;
+      await nextFrame();
+
+      // Expect both headers to be updated
+      expect(headerCell._content.textContent).to.eql('foo');
+      expect(getHeaderCell(grid, 1)._content.textContent).to.eql('bar');
+    });
   });
 
   describe('footer cell', () => {