fix: update grid header and footer on column tree change (#6648) (#6655)

Co-authored-by: Tomi Virkki <tomivirkki@users.noreply.github.com>
vaadin · Oct 18, 2023 · e200cab · e200cab
1 parent 83aef9a
commit e200cab
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 13 deletions.
diff --git 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
@@ -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', () => {