diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts
index 3046a4d5f4..f47930a851 100644
--- a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts
@@ -58,6 +58,7 @@ export class HuiDialogEditCard extends LitElement {
         <hui-dialog-pick-card
           .hass="${this.hass}"
           .cardPicked="${this._cardPicked}"
+          .closeDialog="${this._cancel}"
         ></hui-dialog-pick-card>
       `;
     }
diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-pick-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-pick-card.ts
index 75553235ad..5c55787dfa 100644
--- a/src/panels/lovelace/editor/card-editor/hui-dialog-pick-card.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-dialog-pick-card.ts
@@ -11,6 +11,7 @@ import { LovelaceCardConfig } from "../../../../data/lovelace";
 export class HuiDialogPickCard extends hassLocalizeLitMixin(LitElement) {
   public hass?: HomeAssistant;
   public cardPicked?: (cardConf: LovelaceCardConfig) => void;
+  public closeDialog?: () => void;
 
   static get properties(): PropertyDeclarations {
     return {};
@@ -18,7 +19,11 @@ export class HuiDialogPickCard extends hassLocalizeLitMixin(LitElement) {
 
   protected render(): TemplateResult {
     return html`
-      <paper-dialog with-backdrop opened>
+      <paper-dialog
+        with-backdrop
+        opened
+        @opened-changed="${this._openedChanged}"
+      >
         <h2>${this.localize("ui.panel.lovelace.editor.edit_card.header")}</h2>
         <paper-dialog-scrollable>
           <hui-card-picker
@@ -33,6 +38,12 @@ export class HuiDialogPickCard extends hassLocalizeLitMixin(LitElement) {
     `;
   }
 
+  private _openedChanged(ev) {
+    if (!ev.detail.value) {
+      this.closeDialog!();
+    }
+  }
+
   private _skipPick() {
     this.cardPicked!({ type: "" });
   }
diff --git a/src/panels/lovelace/editor/card-editor/hui-edit-card.ts b/src/panels/lovelace/editor/card-editor/hui-edit-card.ts
index ef346233d3..c793a97376 100644
--- a/src/panels/lovelace/editor/card-editor/hui-edit-card.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-edit-card.ts
@@ -132,7 +132,11 @@ export class HuiEditCard extends hassLocalizeLitMixin(LitElement) {
 
     return html`
       ${this.renderStyle()}
-      <paper-dialog with-backdrop opened>
+      <paper-dialog
+        with-backdrop
+        opened
+        @opened-changed="${this._openedChanged}"
+      >
         <h2>${this.localize("ui.panel.lovelace.editor.edit_card.header")}</h2>
         <paper-spinner
           ?active="${this._loading}"
@@ -436,6 +440,12 @@ export class HuiEditCard extends hassLocalizeLitMixin(LitElement) {
   private get _creatingCard(): boolean {
     return this.path!.length === 1;
   }
+
+  private _openedChanged(ev) {
+    if (!ev.detail.value) {
+      this.closeDialog!();
+    }
+  }
 }
 
 declare global {