From 57e535c2c8aae1d79b9bb079245eeff45e43bf9c Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Thu, 25 Mar 2021 14:21:38 +0100
Subject: [PATCH] Fix changing view type (#8688)

---
 src/panels/lovelace/views/hui-view.ts | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/panels/lovelace/views/hui-view.ts b/src/panels/lovelace/views/hui-view.ts
index 0a56d3ff7f..666e47e1f0 100644
--- a/src/panels/lovelace/views/hui-view.ts
+++ b/src/panels/lovelace/views/hui-view.ts
@@ -51,6 +51,8 @@ export class HUIView extends UpdatingElement {
 
   @internalProperty() private _badges: LovelaceBadge[] = [];
 
+  private _layoutElementType?: string;
+
   private _layoutElement?: LovelaceViewElement;
 
   // Public to make demo happy
@@ -116,8 +118,15 @@ export class HUIView extends UpdatingElement {
       };
     }
 
-    if (configChanged && !this._layoutElement) {
+    let replace = false;
+
+    if (
+      configChanged &&
+      (!this._layoutElement || this._layoutElementType !== viewConfig!.type)
+    ) {
+      replace = true;
       this._layoutElement = createViewElement(viewConfig!);
+      this._layoutElementType = viewConfig!.type;
       this._layoutElement.addEventListener("ll-create-card", () => {
         showCreateCardDialog(this, {
           lovelaceConfig: this.lovelace!.config,
@@ -195,7 +204,10 @@ export class HUIView extends UpdatingElement {
       );
     }
 
-    if (this._layoutElement && !this.lastChild) {
+    if (this._layoutElement && replace) {
+      while (this.lastChild) {
+        this.removeChild(this.lastChild);
+      }
       this.appendChild(this._layoutElement);
     }
   }