From e200cab4646e30c2a8c7c7a6dc783d55e442bbb9 Mon Sep 17 00:00:00 2001
From: Vaadin Bot <vaadin-bot@users.noreply.github.com>
Date: Wed, 18 Oct 2023 09:52:25 +0200
Subject: [PATCH] fix: update grid header and footer on column tree change
 (#6648) (#6655)

Co-authored-by: Tomi Virkki <tomivirkki@users.noreply.github.com>
---
 packages/grid/src/vaadin-grid-mixin.js | 28 ++++++++-------
 packages/grid/test/renderers.test.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 d54c720b89..43bc1c394c 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.test.js b/packages/grid/test/renderers.test.js
index 8896a4de3b..9d6063a4f3 100644
--- a/packages/grid/test/renderers.test.js
+++ b/packages/grid/test/renderers.test.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 '../vaadin-grid.js';
 import { flushGrid, getBodyCellContent, getCell, getContainerCell } from './helpers.js';
@@ -249,6 +249,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', () => {