fix: only clear overlay root when assigning a renderer if needed (#7313…

…) (#7314)

Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>

packages/overlay/src/vaadin-overlay-mixin.js

@@ -220,12 +220,13 @@ export const OverlayMixin = (superClass) =>
       this._oldOwner = owner;
 
       const rendererChanged = this._oldRenderer !== renderer;
+      const hasOldRenderer = this._oldRenderer !== undefined;
       this._oldRenderer = renderer;
 
       const openedChanged = this._oldOpened !== opened;
       this._oldOpened = opened;
 
-      if (rendererChanged) {
+      if (rendererChanged && hasOldRenderer) {
         this.innerHTML = '';
         // Whenever a Lit-based renderer is used, it assigns a Lit part to the node it was rendered into.
         // When clearing the rendered content, this part needs to be manually disposed of.

packages/overlay/test/renderer.common.js

@@ -140,4 +140,29 @@ describe('renderer', () => {
     await nextRender();
     expect(overlay.textContent.trim()).to.equal('');
   });
+
+  it('should not clear the root on open when setting renderer', async () => {
+    const spy = sinon.spy(overlay, 'innerHTML', ['set']);
+    overlay.renderer = (root) => {
+      if (!root.innerHTML) {
+        root.appendChild(content);
+      }
+    };
+    overlay.opened = true;
+    await nextRender();
+    expect(spy.set).to.not.be.called;
+  });
+
+  it('should not re-render when opened after requesting content update', async () => {
+    const spy = sinon.spy(overlay, 'appendChild');
+    overlay.renderer = (root) => {
+      if (!root.innerHTML) {
+        root.appendChild(content);
+      }
+    };
+    overlay.requestContentUpdate();
+    overlay.opened = true;
+    await nextRender();
+    expect(spy).to.be.calledOnce;
+  });
 });