From a12c2eea5df02d1a2ddb922ae0ee6cb8978b4e77 Mon Sep 17 00:00:00 2001
From: Nathan Orick <cnathanorick@gmail.com>
Date: Mon, 25 Oct 2021 13:49:00 -0400
Subject: [PATCH] Ensure Sortable is recreated when card editors are reopened
 (#10382)

---
 .../lovelace/components/hui-entity-editor.ts  | 25 +++++++++++--------
 .../editor/hui-entities-card-row-editor.ts    | 25 +++++++++++--------
 2 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/src/panels/lovelace/components/hui-entity-editor.ts b/src/panels/lovelace/components/hui-entity-editor.ts
index 0393d59ea9..ff81d8ec67 100644
--- a/src/panels/lovelace/components/hui-entity-editor.ts
+++ b/src/panels/lovelace/components/hui-entity-editor.ts
@@ -10,10 +10,6 @@ import {
 import { customElement, property, state } from "lit/decorators";
 import { guard } from "lit/directives/guard";
 import type { SortableEvent } from "sortablejs";
-import Sortable, {
-  AutoScroll,
-  OnSpill,
-} from "sortablejs/modular/sortable.core.esm";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/entity/ha-entity-picker";
 import type { HaEntityPicker } from "../../../components/entity/ha-entity-picker";
@@ -22,6 +18,8 @@ import { sortableStyles } from "../../../resources/ha-sortable-style";
 import { HomeAssistant } from "../../../types";
 import { EntityConfig } from "../entity-rows/types";
 
+let Sortable;
+
 @customElement("hui-entity-editor")
 export class HuiEntityEditor extends LitElement {
   @property({ attribute: false }) protected hass?: HomeAssistant;
@@ -34,7 +32,7 @@ export class HuiEntityEditor extends LitElement {
 
   @state() private _renderEmptySortable = false;
 
-  private _sortable?: Sortable;
+  private _sortable?;
 
   public connectedCallback() {
     super.connectedCallback();
@@ -86,11 +84,6 @@ export class HuiEntityEditor extends LitElement {
     `;
   }
 
-  protected firstUpdated(): void {
-    Sortable.mount(OnSpill);
-    Sortable.mount(new AutoScroll());
-  }
-
   protected updated(changedProps: PropertyValues): void {
     super.updated(changedProps);
 
@@ -128,7 +121,17 @@ export class HuiEntityEditor extends LitElement {
     this._renderEmptySortable = false;
   }
 
-  private _createSortable() {
+  private async _createSortable() {
+    if (!Sortable) {
+      const sortableImport = await import(
+        "sortablejs/modular/sortable.core.esm"
+      );
+
+      Sortable = sortableImport.Sortable;
+      Sortable.mount(sortableImport.OnSpill);
+      Sortable.mount(sortableImport.AutoScroll());
+    }
+
     this._sortable = new Sortable(this.shadowRoot!.querySelector(".entities"), {
       animation: 150,
       fallbackClass: "sortable-fallback",
diff --git a/src/panels/lovelace/editor/hui-entities-card-row-editor.ts b/src/panels/lovelace/editor/hui-entities-card-row-editor.ts
index 5ea6589448..e9e8f5d92c 100644
--- a/src/panels/lovelace/editor/hui-entities-card-row-editor.ts
+++ b/src/panels/lovelace/editor/hui-entities-card-row-editor.ts
@@ -10,10 +10,6 @@ import {
 import { customElement, property, state } from "lit/decorators";
 import { guard } from "lit/directives/guard";
 import type { SortableEvent } from "sortablejs";
-import Sortable, {
-  AutoScroll,
-  OnSpill,
-} from "sortablejs/modular/sortable.core.esm";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/entity/ha-entity-picker";
 import type { HaEntityPicker } from "../../../components/entity/ha-entity-picker";
@@ -23,6 +19,8 @@ import { sortableStyles } from "../../../resources/ha-sortable-style";
 import { HomeAssistant } from "../../../types";
 import { EntityConfig, LovelaceRowConfig } from "../entity-rows/types";
 
+let Sortable;
+
 declare global {
   interface HASSDomEvents {
     "entities-changed": {
@@ -43,7 +41,7 @@ export class HuiEntitiesCardRowEditor extends LitElement {
 
   @state() private _renderEmptySortable = false;
 
-  private _sortable?: Sortable;
+  private _sortable?;
 
   public connectedCallback() {
     super.connectedCallback();
@@ -134,11 +132,6 @@ export class HuiEntitiesCardRowEditor extends LitElement {
     `;
   }
 
-  protected firstUpdated(): void {
-    Sortable.mount(OnSpill);
-    Sortable.mount(new AutoScroll());
-  }
-
   protected updated(changedProps: PropertyValues): void {
     super.updated(changedProps);
 
@@ -176,7 +169,17 @@ export class HuiEntitiesCardRowEditor extends LitElement {
     this._renderEmptySortable = false;
   }
 
-  private _createSortable() {
+  private async _createSortable() {
+    if (!Sortable) {
+      const sortableImport = await import(
+        "sortablejs/modular/sortable.core.esm"
+      );
+
+      Sortable = sortableImport.Sortable;
+      Sortable.mount(sortableImport.OnSpill);
+      Sortable.mount(sortableImport.AutoScroll());
+    }
+
     this._sortable = new Sortable(this.shadowRoot!.querySelector(".entities"), {
       animation: 150,
       fallbackClass: "sortable-fallback",