refactor: allow grid header and footer renderers to run multiple times

vaadin-grid-flow-parent/vaadin-grid-flow-integration-tests/src/main/java/com/vaadin/flow/component/grid/it/GridHeaderFooterRowPage.java

@@ -97,6 +97,13 @@ public GridHeaderFooterRowPage() {
         button.setId("set-components-for-headers");
         add(button);
 
+        button = new NativeButton("Set components for footers",
+                event -> grid.getFooterRows().stream()
+                        .flatMap(row -> row.getCells().stream())
+                        .forEach(cell -> cell.setComponent(new Span("foo"))));
+        button.setId("set-components-for-footers");
+        add(button);
+
         button = new NativeButton("Set text for headers",
                 event -> grid.getHeaderRows().stream()
                         .flatMap(row -> row.getCells().stream())

vaadin-grid-flow-parent/vaadin-grid-flow-integration-tests/src/test/java/com/vaadin/flow/component/grid/it/GridHeaderFooterRowIT.java

@@ -116,6 +116,42 @@ public void addFootersAfterGridIsRendered_cellsAreRenderedInCorrectOrder() {
         assertFooterOrder(2, 0, 1);
     }
 
+    @Test
+    public void setHeaderComponent_appendHeader_componentIsPreserved() {
+        clickButton("append-header");
+        clickButton("set-components-for-headers");
+        clickButton("append-header");
+
+        List<WebElement> headerCells = getHeaderCells();
+        Assert.assertEquals("Unexpected amount of header cells", 2,
+                headerCells.size());
+        Assert.assertEquals(
+                "The first header row should contain the moved component",
+                "<span>foo</span>",
+                headerCells.get(0).getDomProperty("innerHTML"));
+        Assert.assertEquals(
+                "The appended header row should contain only its own text", "1",
+                headerCells.get(1).getDomProperty("innerHTML"));
+    }
+
+    @Test
+    public void setFooterComponent_prependFooter_componentIsPreserved() {
+        clickButton("append-footer");
+        clickButton("set-components-for-footers");
+        clickButton("prepend-footer");
+
+        List<WebElement> footerCells = getFooterCells();
+        Assert.assertEquals("Unexpected amount of footer cells", 2,
+                footerCells.size());
+        Assert.assertEquals(
+                "The prepended footer row should contain only its own text",
+                "1", footerCells.get(0).getDomProperty("innerHTML"));
+        Assert.assertEquals(
+                "The last footer row should contain the moved component",
+                "<span>foo</span>",
+                footerCells.get(1).getDomProperty("innerHTML"));
+    }
+
     @Test
     public void appendHeaderAfterGridIsRendered_lastHeaderIsEmpty() {
         clickButton("append-header");

vaadin-grid-flow-parent/vaadin-grid-flow-integration-tests/test/grid-connector-header-footer.test.ts

@@ -66,14 +66,43 @@ describe('grid connector - header and footer renderers', () => {
     });
 
     describe('sorter', () => {
-      it('should render content inside the sorter', async () => {
+      it('should render sorter', async () => {
         grid.$connector.setHeaderRenderer(column, { content: 'Name', showSorter: true, sorterPath: 'name' });
         await nextFrame();
 
         const sorter = getHeaderCellContent(column).querySelector('vaadin-grid-sorter')!;
         expect(sorter).to.exist;
+        expect(sorter.path).to.equal('name');
+      });
+
+      it('should render text content inside sorter', async () => {
+        grid.$connector.setHeaderRenderer(column, { content: 'Name', showSorter: true, sorterPath: 'name' });
+        await nextFrame();
+
+        const sorter = getHeaderCellContent(column).querySelector('vaadin-grid-sorter')!;
         expect(sorter.textContent).to.equal('Name');
       });
+
+      it('should render node content inside sorter', async () => {
+        const span = document.createElement('span');
+        span.textContent = 'Name';
+        grid.$connector.setHeaderRenderer(column, { content: span, showSorter: true, sorterPath: 'name' });
+        await nextFrame();
+
+        const sorter = getHeaderCellContent(column).querySelector('vaadin-grid-sorter')!;
+        expect(sorter.contains(span)).to.be.true;
+      });
+
+      it('should reuse sorter element when renderer runs again', async () => {
+        grid.$connector.setHeaderRenderer(column, { content: 'Name', showSorter: true, sorterPath: 'name' });
+        await nextFrame();
+
+        const oldSorter = getHeaderCellContent(column).querySelector('vaadin-grid-sorter')!;
+        grid.requestContentUpdate();
+        const newSorter = getHeaderCellContent(column).querySelector('vaadin-grid-sorter')!;
+
+        expect(newSorter).to.equal(oldSorter);
+      });
     });
   });
 

vaadin-grid-flow-parent/vaadin-grid-flow/src/main/resources/META-INF/frontend/gridConnector.ts

@@ -8,15 +8,6 @@ function isRangeEqual(range1, range2) {
   return range1?.[0] === range2?.[0] && range1?.[1] === range2?.[1];
 }
 
-function singleTimeRenderer(renderer) {
-  return (root) => {
-    if (renderer) {
-      renderer(root);
-      renderer = null;
-    }
-  };
-}
-
 function renderContent(root, content) {
   if (content instanceof Node) {
     root.appendChild(content);
@@ -430,11 +421,15 @@ window.Vaadin.Flow.gridConnector.initLazy = (grid) => {
       return;
     }
 
-    column.headerRenderer = singleTimeRenderer((root) => {
-      // Render sorter
+    // The renderer can run multiple times, e.g. when the grid re-creates
+    // header cells. The sorter is cached between runs: re-creating it would
+    // reset its direction and fire a sorters-changed round-trip to the server.
+    let sorter;
+
+    column.headerRenderer = (root) => {
       let contentRoot = root;
       if (showSorter) {
-        const sorter = document.createElement('vaadin-grid-sorter');
+        sorter ??= document.createElement('vaadin-grid-sorter');
         sorter.setAttribute('path', sorterPath);
         root.appendChild(sorter);
 
@@ -443,7 +438,7 @@ window.Vaadin.Flow.gridConnector.initLazy = (grid) => {
       }
 
       renderContent(contentRoot, content);
-    });
+    };
   };
 
   // This method is overridden to prevent the grid web component from
@@ -488,7 +483,7 @@ window.Vaadin.Flow.gridConnector.initLazy = (grid) => {
       return;
     }
 
-    column.footerRenderer = singleTimeRenderer((root) => renderContent(root, content));
+    column.footerRenderer = (root) => renderContent(root, content);
   };
 
   grid.addEventListener('vaadin-context-menu-before-open', function (e) {