Close new automation dialog before moving to next step (#9071)

* Close new automatin dialog before next step

* Update dialog-thingtalk.ts

* Fix

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/components/ha-blueprint-picker.ts

@@ -108,11 +108,9 @@ class HaBluePrintPicker extends LitElement {
         min-width: 200px;
         display: block;
       }
-      paper-listbox {
-        min-width: 200px;
-      }
       paper-item {
         cursor: pointer;
+        min-width: 200px;
       }
     `;
   }

src/dialogs/make-dialog-manager.ts

@@ -97,7 +97,7 @@ export const closeDialog = async (dialogTag: string): Promise<boolean> => {
   if (!(dialogTag in LOADED)) {
     return true;
   }
-  const dialogElement = await LOADED[dialogTag];
+  const dialogElement: HassDialog = await LOADED[dialogTag];
   if (dialogElement.closeDialog) {
     return dialogElement.closeDialog() !== false;
   }

src/panels/config/automation/dialog-new-automation.ts

@@ -11,20 +11,25 @@ import {
 } from "lit-element";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { fireEvent } from "../../../common/dom/fire_event";
+import { nextRender } from "../../../common/util/render-status";
 import "../../../components/ha-blueprint-picker";
 import "../../../components/ha-card";
 import "../../../components/ha-circular-progress";
-import "../../../components/ha-dialog";
+import { createCloseHeading } from "../../../components/ha-dialog";
 import {
   AutomationConfig,
   showAutomationEditor,
 } from "../../../data/automation";
+import {
+  HassDialog,
+  replaceDialog,
+} from "../../../dialogs/make-dialog-manager";
 import { haStyle, haStyleDialog } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
 import { showThingtalkDialog } from "./thingtalk/show-dialog-thingtalk";
 
 @customElement("ha-dialog-new-automation")
-class DialogNewAutomation extends LitElement {
+class DialogNewAutomation extends LitElement implements HassDialog {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @state() private _opened = false;
@@ -46,8 +51,9 @@ class DialogNewAutomation extends LitElement {
       <ha-dialog
         open
         @closed=${this.closeDialog}
-        .heading=${this.hass.localize(
-          "ui.panel.config.automation.dialog_new.header"
+        .heading=${createCloseHeading(
+          this.hass,
+          this.hass.localize("ui.panel.config.automation.dialog_new.header")
         )}
       >
         <div>
@@ -107,22 +113,25 @@ class DialogNewAutomation extends LitElement {
   }
 
   private _thingTalk() {
-    this.closeDialog();
+    replaceDialog();
     showThingtalkDialog(this, {
       callback: (config: Partial<AutomationConfig> | undefined) =>
         showAutomationEditor(this, config),
       input: this.shadowRoot!.querySelector("paper-input")!.value as string,
     });
+    this.closeDialog();
   }
 
-  private _blueprintPicked(ev: CustomEvent) {
+  private async _blueprintPicked(ev: CustomEvent) {
+    this.closeDialog();
+    await nextRender();
     showAutomationEditor(this, { use_blueprint: { path: ev.detail.value } });
-    this.closeDialog();
   }
 
-  private _blank() {
-    showAutomationEditor(this);
+  private async _blank() {
     this.closeDialog();
+    await nextRender();
+    showAutomationEditor(this);
   }
 
   static get styles(): CSSResultGroup {

src/panels/config/automation/thingtalk/dialog-thingtalk.ts

@@ -13,6 +13,7 @@ import {
   query,
   TemplateResult,
 } from "lit-element";
+import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/dialog/ha-paper-dialog";
 import "../../../../components/ha-circular-progress";
 import type { AutomationConfig } from "../../../../data/automation";
@@ -67,6 +68,15 @@ class DialogThingtalk extends LitElement {
     }
   }
 
+  public closeDialog() {
+    this._placeholders = undefined;
+    if (this._input) {
+      this._input.value = null;
+    }
+    this._opened = false;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
   protected render(): TemplateResult {
     if (!this._params) {
       return html``;
@@ -225,25 +235,17 @@ class DialogThingtalk extends LitElement {
 
   private _sendConfig(input, config) {
     this._params!.callback({ alias: input, ...config });
-    this._closeDialog();
+    this.closeDialog();
   }
 
   private _skip() {
     this._params!.callback(undefined);
-    this._closeDialog();
-  }
-
-  private _closeDialog() {
-    this._placeholders = undefined;
-    if (this._input) {
-      this._input.value = null;
-    }
-    this._opened = false;
+    this.closeDialog();
   }
 
   private _openedChanged(ev: PolymerChangedEvent<boolean>): void {
     if (!ev.detail.value) {
-      this._closeDialog();
+      this.closeDialog();
     }
   }