From f4319d9b13b90d9a0c9128baf244c5dc7fa6c01d Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@home-assistant.io>
Date: Fri, 29 Mar 2019 16:40:28 -0700
Subject: [PATCH] Fix custom panel/hass.io navigation (#3034)

* Hass.io: use correct function for firing evenet

* Fix navigation from custom panel
---
 hassio/src/hassio-main.js            |  5 +++--
 src/entrypoints/custom-panel.ts      | 15 ++++++++-------
 src/panels/custom/ha-panel-custom.ts |  7 +++++++
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/hassio/src/hassio-main.js b/hassio/src/hassio-main.js
index a01086d6db..df4d57b985 100644
--- a/hassio/src/hassio-main.js
+++ b/hassio/src/hassio-main.js
@@ -87,7 +87,8 @@ class HassioMain extends EventsMixin(NavigateMixin(PolymerElement)) {
     // open and close events. These events are a no-op in newer versions of
     // Home Assistant.
     this.addEventListener("hass-toggle-menu", () => {
-      window.parent.customPanel.fire(
+      fireEvent(
+        window.parent.customPanel,
         this.hass.dockedSidebar ? "hass-close-menu" : "hass-open-menu"
       );
     });
@@ -130,7 +131,7 @@ class HassioMain extends EventsMixin(NavigateMixin(PolymerElement)) {
     if (route.path === "" && route.prefix === "/hassio") {
       this.navigate("/hassio/dashboard", true);
     }
-    this.fire("iron-resize");
+    fireEvent(this, "iron-resize");
   }
 
   equalsAddon(page) {
diff --git a/src/entrypoints/custom-panel.ts b/src/entrypoints/custom-panel.ts
index f5c9c463e5..4021b7a8a7 100644
--- a/src/entrypoints/custom-panel.ts
+++ b/src/entrypoints/custom-panel.ts
@@ -72,13 +72,14 @@ function initialize(panel: Panel, properties: {}) {
           }
         };
         panelEl!.addEventListener("hass-toggle-menu", forwardEvent);
-        window.addEventListener("location-changed", (ev: any) =>
-          navigate(
-            window.parent.customPanel,
-            window.location.pathname,
-            ev.detail ? ev.detail.replace : false
-          )
-        );
+        window.addEventListener("location-changed", (ev: any) => {
+          if (window.parent.customPanel) {
+            window.parent.customPanel.navigate(
+              window.location.pathname,
+              ev.detail ? ev.detail.replace : false
+            );
+          }
+        });
         setProperties({ panel, ...properties });
         document.body.appendChild(panelEl!);
       },
diff --git a/src/panels/custom/ha-panel-custom.ts b/src/panels/custom/ha-panel-custom.ts
index 55bb613ad6..b7de1b6b30 100644
--- a/src/panels/custom/ha-panel-custom.ts
+++ b/src/panels/custom/ha-panel-custom.ts
@@ -4,6 +4,7 @@ import { createCustomPanelElement } from "../../util/custom-panel/create-custom-
 import { setCustomPanelProperties } from "../../util/custom-panel/set-custom-panel-properties";
 import { HomeAssistant, Route, Panel } from "../../types";
 import { CustomPanelConfig } from "../../data/panel_custom";
+import { navigate } from "../../common/navigate";
 
 declare global {
   interface Window {
@@ -18,6 +19,12 @@ export class HaPanelCustom extends UpdatingElement {
   @property() public panel!: Panel;
   private _setProperties?: (props: {}) => void | undefined;
 
+  // Since navigate fires events on `window`, we need to expose this as a function
+  // to allow custom panels to forward their location changes to the main window
+  // instead of their iframe window.
+  public navigate = (path: string, replace?: boolean) =>
+    navigate(this, path, replace);
+
   public registerIframe(initialize, setProperties) {
     initialize(this.panel, {
       hass: this.hass,