Close dialog when clicked on link (#16690)

src/common/dom/is-navigation-click.ts

@@ -1,4 +1,4 @@
-export const isNavigationClick = (e: MouseEvent) => {
+export const isNavigationClick = (e: MouseEvent, preventDefault = true) => {
   // Taken from polymer/pwa-helpers. BSD-3 licensed
   if (
     e.defaultPrevented ||
@@ -40,6 +40,8 @@ export const isNavigationClick = (e: MouseEvent) => {
     return undefined;
   }
 
-  e.preventDefault();
+  if (preventDefault) {
+    e.preventDefault();
+  }
   return href;
 };

src/dialogs/config-flow/step-flow-form.ts

@@ -21,6 +21,7 @@ import type { DataEntryFlowStepForm } from "../../data/data_entry_flow";
 import type { HomeAssistant } from "../../types";
 import type { FlowConfig } from "./show-dialog-data-entry-flow";
 import { configFlowContentStyles } from "./styles";
+import { isNavigationClick } from "../../common/dom/is-navigation-click";
 
 @customElement("step-flow-form")
 class StepFlowForm extends LitElement {
@@ -47,7 +48,7 @@ class StepFlowForm extends LitElement {
 
     return html`
       <h2>${this.flowConfig.renderShowFormStepHeader(this.hass, this.step)}</h2>
-      <div class="content">
+      <div class="content" @click=${this._clickHandler}>
         ${this.flowConfig.renderShowFormStepDescription(this.hass, this.step)}
         ${this._errorMsg
           ? html`<ha-alert alert-type="error">${this._errorMsg}</ha-alert>`
@@ -92,6 +93,14 @@ class StepFlowForm extends LitElement {
     this.addEventListener("keydown", this._handleKeyDown);
   }
 
+  private _clickHandler(ev: MouseEvent) {
+    if (isNavigationClick(ev, false)) {
+      fireEvent(this, "flow-update", {
+        step: undefined,
+      });
+    }
+  }
+
   private _handleKeyDown = (ev: KeyboardEvent) => {
     if (ev.key === "Enter") {
       this._submitStep();

src/panels/config/repairs/dialog-repairs-issue.ts

@@ -3,6 +3,7 @@ import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { formatDateNumeric } from "../../../common/datetime/format_date";
 import { fireEvent } from "../../../common/dom/fire_event";
+import { isNavigationClick } from "../../../common/dom/is-navigation-click";
 import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-markdown";
 import { ignoreRepairsIssue, RepairsIssue } from "../../../data/repairs";
@@ -71,6 +72,7 @@ class DialogRepairsIssue extends LitElement {
           <ha-markdown
             allowsvg
             breaks
+            @click=${this._clickHandler}
             .content=${this.hass.localize(
               `component.${this._issue.domain}.issues.${
                 this._issue.translation_key || this._issue.issue_id
@@ -110,13 +112,13 @@ class DialogRepairsIssue extends LitElement {
                   ? this._issue.learn_more_url.replace("homeassistant://", "/")
                   : this._issue.learn_more_url}
                 .target=${learnMoreUrlIsHomeAssistant ? "" : "_blank"}
+                @click=${learnMoreUrlIsHomeAssistant
+                  ? this.closeDialog
+                  : undefined}
                 slot="primaryAction"
                 rel="noopener noreferrer"
               >
                 <mwc-button
-                  @click=${learnMoreUrlIsHomeAssistant
-                    ? this.closeDialog
-                    : undefined}
                   .label=${this.hass!.localize(
                     "ui.panel.config.repairs.dialog.learn"
                   )}
@@ -140,6 +142,12 @@ class DialogRepairsIssue extends LitElement {
     this.closeDialog();
   }
 
+  private _clickHandler(ev: MouseEvent) {
+    if (isNavigationClick(ev, false)) {
+      this.closeDialog();
+    }
+  }
+
   static styles: CSSResultGroup = [
     haStyleDialog,
     css`