Process code review

src/components/ha-sidebar.ts

@@ -27,6 +27,7 @@ import { LitElement, css, html, nothing } from "lit";
 import { customElement, eventOptions, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
+import type { PaperListboxElement } from "@polymer/paper-listbox";
 import { storage } from "../common/decorators/storage";
 import { fireEvent } from "../common/dom/fire_event";
 import { toggleAttribute } from "../common/dom/toggle_attribute";
@@ -287,6 +288,13 @@ class HaSidebar extends SubscribeMixin(LitElement) {
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
     this._subscribePersistentNotifications();
+
+    window.addEventListener("hass-reset-sidebar", (ev) => {
+      const sidebar = this.shadowRoot?.getElementById(
+        "sidebar"
+      ) as PaperListboxElement;
+      sidebar.selected = ev.detail;
+    });
   }
 
   private _subscribePersistentNotifications(): void {
@@ -397,6 +405,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
     // prettier-ignore
     return html`
       <paper-listbox
+          id="sidebar"
         attr-for-selected="data-panel"
         class="ha-scrollbar"
         .selected=${selectedPanel}
@@ -1124,4 +1133,8 @@ declare global {
   interface HTMLElementTagNameMap {
     "ha-sidebar": HaSidebar;
   }
+
+  interface HASSDomEvents {
+    "hass-reset-sidebar": string;
+  }
 }

src/mixins/prevent-unsaved-mixin.ts

@@ -1,48 +1,57 @@
-import type { LitElement } from "lit";
+import type { LitElement, PropertyValues } from "lit";
 import type { Constructor } from "../types";
 import { isNavigationClick } from "../common/dom/is-navigation-click";
-import { navigate } from "../common/navigate";
+import { fireEvent } from "../common/dom/fire_event";
 
 export const PreventUnsavedMixin = <T extends Constructor<LitElement>>(
   superClass: T
 ) =>
   class extends superClass {
     private _handleClick = async (e: MouseEvent) => {
-      const href = isNavigationClick(e);
-
-      if (!href) {
+      // get the right target, otherwise the composedPath would return <home-assistant> in the new event
+      const target = e
+        .composedPath()
+        .find(
+          (n) => (n as HTMLElement).tagName === "HA-SVG-ICON"
+        ) as HTMLAnchorElement;
+      if (!isNavigationClick(e)) {
         return;
       }
 
-      e.preventDefault();
       const result = await this.promptDiscardChanges();
       if (result) {
-        navigate(href);
+        this._removeListeners();
+        if (target) {
+          const newEvent = new MouseEvent(e.type, e);
+          target.dispatchEvent(newEvent);
+        }
+      } else {
+        fireEvent(this, "hass-reset-sidebar", this.getPanel());
       }
     };
 
-    private _handleUnload = (e: BeforeUnloadEvent) => {
+    private _handleUnload = (e: BeforeUnloadEvent) => e.preventDefault();
+
+    private _removeListeners() {
+      window.removeEventListener("click", this._handleClick, true);
+      window.removeEventListener("beforeunload", this._handleUnload);
+    }
+
+    public willUpdate(changedProperties: PropertyValues): void {
+      super.willUpdate(changedProperties);
+
       if (this.isDirty()) {
-        e.preventDefault();
+        window.addEventListener("click", this._handleClick, true);
+        window.addEventListener("beforeunload", this._handleUnload);
+      } else {
+        this._removeListeners();
       }
-    };
-
-    public connectedCallback(): void {
-      super.connectedCallback();
-
-      document.body.addEventListener("mousedown", this._handleClick, {
-        capture: true,
-      });
-      window.addEventListener("beforeunload", this._handleUnload);
     }
 
     public disconnectedCallback(): void {
       super.disconnectedCallback();
 
-      document.body.removeEventListener("click", this._handleClick, {
-        capture: true,
-      });
-      window.removeEventListener("beforeunload", this._handleUnload);
+      this._removeListeners();
     }
 
     protected isDirty(): boolean {
@@ -52,4 +61,8 @@ export const PreventUnsavedMixin = <T extends Constructor<LitElement>>(
     protected async promptDiscardChanges(): Promise<boolean> {
       return true;
     }
+
+    protected getPanel(): string {
+      return "config";
+    }
   };