From 432e3ba6363d9b711797ec11396e741b74a78bce Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Wed, 9 Sep 2020 17:23:03 +0200
Subject: [PATCH] Fix entity drag (#6884)

---
 .../lovelace/components/hui-entity-editor.ts  | 44 ++++++++++++-------
 .../editor/card-editor/hui-card-editor.ts     | 17 ++++---
 2 files changed, 37 insertions(+), 24 deletions(-)

diff --git a/src/panels/lovelace/components/hui-entity-editor.ts b/src/panels/lovelace/components/hui-entity-editor.ts
index b22bc775fd..90e4b5eeb4 100644
--- a/src/panels/lovelace/components/hui-entity-editor.ts
+++ b/src/panels/lovelace/components/hui-entity-editor.ts
@@ -34,7 +34,9 @@ export class HuiEntityEditor extends LitElement {
 
   @internalProperty() private _attached = false;
 
-  private _sortable?;
+  @internalProperty() private _renderEmptySortable = false;
+
+  private _sortable?: Sortable;
 
   public connectedCallback() {
     super.connectedCallback();
@@ -60,21 +62,23 @@ export class HuiEntityEditor extends LitElement {
           ")"}
       </h3>
       <div class="entities">
-        ${guard([this.entities], () =>
-          this.entities!.map((entityConf, index) => {
-            return html`
-              <div class="entity" data-entity-id=${entityConf.entity}>
-                <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
-                <ha-entity-picker
-                  .hass=${this.hass}
-                  .value=${entityConf.entity}
-                  .index=${index}
-                  @change=${this._valueChanged}
-                  allow-custom-entity
-                ></ha-entity-picker>
-              </div>
-            `;
-          })
+        ${guard([this.entities, this._renderEmptySortable], () =>
+          this._renderEmptySortable
+            ? ""
+            : this.entities!.map((entityConf, index) => {
+                return html`
+                  <div class="entity" data-entity-id=${entityConf.entity}>
+                    <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
+                    <ha-entity-picker
+                      .hass=${this.hass}
+                      .value=${entityConf.entity}
+                      .index=${index}
+                      @change=${this._valueChanged}
+                      allow-custom-entity
+                    ></ha-entity-picker>
+                  </div>
+                `;
+              })
         )}
       </div>
       <ha-entity-picker
@@ -112,10 +116,16 @@ export class HuiEntityEditor extends LitElement {
     }
 
     if (entitiesChanged) {
-      this._sortable.sort(this.entities?.map((entity) => entity.entity));
+      this._handleEntitiesChanged();
     }
   }
 
+  private async _handleEntitiesChanged() {
+    this._renderEmptySortable = true;
+    await this.updateComplete;
+    this._renderEmptySortable = false;
+  }
+
   private _createSortable() {
     this._sortable = new Sortable(this.shadowRoot!.querySelector(".entities"), {
       animation: 150,
diff --git a/src/panels/lovelace/editor/card-editor/hui-card-editor.ts b/src/panels/lovelace/editor/card-editor/hui-card-editor.ts
index f081cc65ae..5c786ad71e 100644
--- a/src/panels/lovelace/editor/card-editor/hui-card-editor.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-card-editor.ts
@@ -5,14 +5,16 @@ import {
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
-  TemplateResult,
   query,
+  TemplateResult,
 } from "lit-element";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { computeRTL } from "../../../../common/util/compute_rtl";
+import { deepEqual } from "../../../../common/util/deep-equal";
+import "../../../../components/ha-circular-progress";
 import "../../../../components/ha-code-editor";
 import type { HaCodeEditor } from "../../../../components/ha-code-editor";
 import type {
@@ -20,14 +22,12 @@ import type {
   LovelaceConfig,
 } from "../../../../data/lovelace";
 import type { HomeAssistant } from "../../../../types";
+import { handleStructError } from "../../common/structs/handle-errors";
 import { getCardElementClass } from "../../create-element/create-card-element";
 import type { EntityConfig } from "../../entity-rows/types";
 import type { LovelaceCardEditor } from "../../types";
-import type { GUIModeChangedEvent } from "../types";
-import "../../../../components/ha-circular-progress";
-import { deepEqual } from "../../../../common/util/deep-equal";
-import { handleStructError } from "../../common/structs/handle-errors";
 import { GUISupportError } from "../gui-support-error";
+import type { GUIModeChangedEvent } from "../types";
 
 export interface ConfigChangedEvent {
   config: LovelaceCardConfig;
@@ -78,6 +78,9 @@ export class HuiCardEditor extends LitElement {
   @query("ha-code-editor") _yamlEditor?: HaCodeEditor;
 
   public get yaml(): string {
+    if (!this._yaml) {
+      this._yaml = safeDump(this._config);
+    }
     return this._yaml || "";
   }
 
@@ -101,7 +104,7 @@ export class HuiCardEditor extends LitElement {
       return;
     }
     this._config = config;
-    this._yaml = safeDump(config);
+    this._yaml = undefined;
     this._error = undefined;
     this._setConfig();
   }