Fix ha-md-dialog polyfill loading

home-assistant · Sep 13, 2024 · e46ff38 · e46ff38
1 parent b87cbdf
commit e46ff38
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 17 deletions.
diff --git a/src/components/ha-md-dialog.ts b/src/components/ha-md-dialog.ts
@@ -14,41 +14,50 @@ export class HaMdDialog extends MdDialog {
   @property({ attribute: "disable-cancel-action", type: Boolean })
   public disableCancelAction = false;
 
+  private _dialogPolyfill: any;
+
   constructor() {
     super();
+
+    this.addEventListener("cancel", this._handleCancel);
+
     if (typeof HTMLDialogElement === "function") {
       this.open = true;
+    } else {
+      // load polyfill dialog for older browsers
+      this.open = false;
+      this._loadDialogPolyfill();
     }
-  }
 
-  async connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener("cancel", this._handleCancel);
+    if (this.animate === undefined) {
+      this.quick = true;
+    }
+  }
 
-    // polyfill dialog for older browsers
-    if (typeof HTMLDialogElement !== "function" && this.shadowRoot?.host) {
-      const dialogPolyfill = await import("dialog-polyfill");
+  async firstUpdated() {
+    // setup polyfill dialog for older browsers
+    if (typeof HTMLDialogElement !== "function") {
       const dialog = this.shadowRoot?.querySelector(
         "dialog"
       ) as HTMLDialogElement;
+      const dialogPolyfill = await this._dialogPolyfill;
       dialogPolyfill.default.registerDialog(dialog);
-      await this._loadStylesheet("/static/polyfills/dialog-polyfill.css");
+      await this._loadPolyfillStylesheet(
+        "/static/polyfills/dialog-polyfill.css"
+      );
       this.open = true;
     }
+  }
 
-    // disable dialog animations on older browsers
-    if (this.animate === undefined) {
-      this.quick = true;
-    }
+  private async _loadDialogPolyfill() {
+    this._dialogPolyfill = import("dialog-polyfill");
   }
 
-  private async _loadStylesheet(href) {
-    // Create a <link> element
+  private async _loadPolyfillStylesheet(href) {
     const link = document.createElement("link");
     link.rel = "stylesheet";
     link.href = href;
 
-    // Return a promise that resolves when the CSS is loaded
     return new Promise<void>((resolve, reject) => {
       link.onload = () => resolve();
       link.onerror = () =>
@@ -62,7 +71,7 @@ export class HaMdDialog extends MdDialog {
     if (this.disableCancelAction) {
       closeEvent.preventDefault();
       const dialogElement = this.shadowRoot?.querySelector("dialog");
-      if (!this.quick) {
+      if (this.animate !== undefined) {
         dialogElement?.animate(
           [
             {

diff --git a/src/panels/config/lovelace/resources/dialog-lovelace-resource-detail.ts b/src/panels/config/lovelace/resources/dialog-lovelace-resource-detail.ts
@@ -94,7 +94,6 @@ export class DialogLovelaceResourceDetail extends LitElement {
         disable-cancel-action
         @closed=${this._dialogClosed}
         .ariaLabel=${ariaLabel}
-        type="alert"
       >
         <ha-dialog-header slot="headline">
           <ha-icon-button