From 73b6ee32ea17a79816f3af19f6c349a2f3c8f79b Mon Sep 17 00:00:00 2001
From: Vaadin Bot <vaadin-bot@users.noreply.github.com>
Date: Wed, 10 Apr 2024 10:45:46 +0200
Subject: [PATCH] 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 |  3 ++-
 packages/overlay/test/renderer.common.js     | 25 ++++++++++++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/packages/overlay/src/vaadin-overlay-mixin.js b/packages/overlay/src/vaadin-overlay-mixin.js
index 1a65e8617c..b91970d6e1 100644
--- a/packages/overlay/src/vaadin-overlay-mixin.js
+++ b/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.
diff --git a/packages/overlay/test/renderer.common.js b/packages/overlay/test/renderer.common.js
index 135b19fb45..6689484e18 100644
--- a/packages/overlay/test/renderer.common.js
+++ b/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;
+  });
 });