Cleanup event listeners (#18803)

src/dialogs/notifications/notification-drawer.ts

@@ -34,7 +34,7 @@ export class HuiNotificationDrawer extends LitElement {
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    window.addEventListener("location-changed", this.closeDialog);
+    window.removeEventListener("location-changed", this.closeDialog);
   }
 
   showDialog({ narrow }) {

src/panels/config/application_credentials/ha-config-application-credentials.ts

@@ -16,7 +16,6 @@ import {
   DataTableColumnContainer,
   SelectionChangedEvent,
 } from "../../../components/data-table/ha-data-table";
-import "../../../components/data-table/ha-data-table-icon";
 import "../../../components/ha-fab";
 import "../../../components/ha-help-tooltip";
 import "../../../components/ha-svg-icon";

src/panels/config/voice-assistants/ha-config-voice-assistants-expose.ts

@@ -430,24 +430,30 @@ export class VoiceAssistantsExpose extends LitElement {
     }
   );
 
-  public constructor() {
-    super();
-    window.addEventListener("location-changed", () => {
-      if (
-        window.location.search.substring(1) !== this._searchParms.toString()
-      ) {
-        this._searchParms = new URLSearchParams(window.location.search);
-      }
-    });
-    window.addEventListener("popstate", () => {
-      if (
-        window.location.search.substring(1) !== this._searchParms.toString()
-      ) {
-        this._searchParms = new URLSearchParams(window.location.search);
-      }
-    });
+  public connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("location-changed", this._locationChanged);
+    window.addEventListener("popstate", this._popState);
   }
 
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    window.removeEventListener("location-changed", this._locationChanged);
+    window.removeEventListener("popstate", this._popState);
+  }
+
+  private _locationChanged = () => {
+    if (window.location.search.substring(1) !== this._searchParms.toString()) {
+      this._searchParms = new URLSearchParams(window.location.search);
+    }
+  };
+
+  private _popState = () => {
+    if (window.location.search.substring(1) !== this._searchParms.toString()) {
+      this._searchParms = new URLSearchParams(window.location.search);
+    }
+  };
+
   private async _fetchEntities() {
     this._extEntities = await getExtendedEntityRegistryEntries(
       this.hass,

src/panels/lovelace/ha-panel-lovelace.ts

@@ -1,5 +1,6 @@
 import "@material/mwc-button";
 import deepFreeze from "deep-freeze";
+import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { constructUrlCurrentPath } from "../../common/url/construct-url";
@@ -9,6 +10,20 @@ import {
 } from "../../common/url/search-params";
 import { domainToName } from "../../data/integration";
 import { subscribeLovelaceUpdates } from "../../data/lovelace";
+import {
+  deleteConfig,
+  fetchConfig,
+  isStrategyDashboard,
+  LovelaceConfig,
+  LovelaceDashboardStrategyConfig,
+  LovelaceRawConfig,
+  saveConfig,
+} from "../../data/lovelace/config/types";
+import {
+  isStrategyView,
+  LovelaceViewConfig,
+} from "../../data/lovelace/config/view";
+import { fetchResources } from "../../data/lovelace/resource";
 import { WindowWithPreloads } from "../../data/preloads";
 import "../../layouts/hass-error-screen";
 import "../../layouts/hass-loading-screen";
@@ -19,20 +34,6 @@ import { showSaveDialog } from "./editor/show-save-config-dialog";
 import "./hui-root";
 import { generateLovelaceDashboardStrategy } from "./strategies/get-strategy";
 import { Lovelace } from "./types";
-import {
-  deleteConfig,
-  fetchConfig,
-  isStrategyDashboard,
-  LovelaceConfig,
-  LovelaceRawConfig,
-  LovelaceDashboardStrategyConfig,
-  saveConfig,
-} from "../../data/lovelace/config/types";
-import { fetchResources } from "../../data/lovelace/resource";
-import {
-  isStrategyView,
-  LovelaceViewConfig,
-} from "../../data/lovelace/config/view";
 
 (window as any).loadCardHelpers = () => import("./custom-card-helpers");
 
@@ -71,12 +72,7 @@ export class LovelacePanel extends LitElement {
 
   private _fetchConfigOnConnect = false;
 
-  private _unsubUpdates?;
-
-  constructor() {
-    super();
-    this._closeEditor = this._closeEditor.bind(this);
-  }
+  private _unsubUpdates?: Promise<UnsubscribeFunc>;
 
   public connectedCallback(): void {
     super.connectedCallback();
@@ -100,14 +96,21 @@ export class LovelacePanel extends LitElement {
       // Config was changed when we were not at the lovelace panel
       this._fetchConfig(false);
     }
+    window.addEventListener("connection-status", this._handleConnectionStatus);
   }
 
   public disconnectedCallback(): void {
     super.disconnectedCallback();
     // On the main dashboard we want to stay subscribed as that one is cached.
     if (this.urlPath !== null && this._unsubUpdates) {
-      this._unsubUpdates();
+      this._unsubUpdates.then((unsub) => unsub());
+      this._unsubUpdates = undefined;
     }
+    // reload lovelace on reconnect so we are sure we have the latest config
+    window.removeEventListener(
+      "connection-status",
+      this._handleConnectionStatus
+    );
   }
 
   protected render(): TemplateResult | void {
@@ -165,14 +168,15 @@ export class LovelacePanel extends LitElement {
     if (!this._unsubUpdates) {
       this._subscribeUpdates();
     }
-    // reload lovelace on reconnect so we are sure we have the latest config
-    window.addEventListener("connection-status", (ev) => {
-      if (ev.detail === "connected") {
-        this._fetchConfig(false);
-      }
-    });
   }
 
+  private _handleConnectionStatus = (ev) => {
+    // reload lovelace on reconnect so we are sure we have the latest config
+    if (ev.detail === "connected") {
+      this._fetchConfig(false);
+    }
+  };
+
   private async _regenerateConfig() {
     const conf = await generateLovelaceDashboardStrategy(
       DEFAULT_CONFIG.strategy,
@@ -183,16 +187,16 @@ export class LovelacePanel extends LitElement {
   }
 
   private async _subscribeUpdates() {
-    this._unsubUpdates = await subscribeLovelaceUpdates(
+    this._unsubUpdates = subscribeLovelaceUpdates(
       this.hass!.connection,
       this.urlPath,
       () => this._lovelaceChanged()
     );
   }
 
-  private _closeEditor() {
+  private _closeEditor = () => {
     this._panelState = "loaded";
-  }
+  };
 
   private _lovelaceChanged() {
     if (this._ignoreNextUpdateEvent) {