From dac5cca899802c77200f3d204c2540827a5b3198 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Thu, 3 Nov 2022 10:25:43 +0000
Subject: [PATCH] Fixed `<GhExploreIframe>` leaking event listeners and
 throwing errors in tests

no issue

- added cleanup of the `message` event handler added to `window` when the component is destroyed
- added a guard to the event handler method to abort early if a message is received whilst the component is being destroyed
---
 .../admin/app/components/gh-explore-iframe.js | 39 ++++++++++++-------
 1 file changed, 25 insertions(+), 14 deletions(-)

diff --git a/ghost/admin/app/components/gh-explore-iframe.js b/ghost/admin/app/components/gh-explore-iframe.js
index 1da969309a..e1486cf7f5 100644
--- a/ghost/admin/app/components/gh-explore-iframe.js
+++ b/ghost/admin/app/components/gh-explore-iframe.js
@@ -7,26 +7,37 @@ export default class GhExploreIframe extends Component {
     @service router;
     @service feature;
 
+    willDestroy() {
+        super.willDestroy(...arguments);
+        window.removeEventListener('message', this.handleIframeMessage);
+    }
+
     @action
     setup() {
         this.explore.getExploreIframe().src = this.explore.getIframeURL();
+        window.addEventListener('message', this.handleIframeMessage);
+    }
 
-        window.addEventListener('message', async (event) => {
-            // only process messages coming from the explore iframe
-            if (event?.data && this.explore.getIframeURL().includes(event?.origin)) {
-                if (event.data?.request === 'apiUrl') {
-                    this._handleUrlRequest();
-                }
+    @action
+    async handleIframeMessage(event) {
+        if (this.isDestroyed || this.isDestroying) {
+            return;
+        }
 
-                if (event.data?.route) {
-                    this._handleRouteUpdate(event.data);
-                }
-
-                if (event.data?.siteData) {
-                    this._handleSiteDataUpdate(event.data);
-                }
+        // only process messages coming from the explore iframe
+        if (event?.data && this.explore.getIframeURL().includes(event?.origin)) {
+            if (event.data?.request === 'apiUrl') {
+                this._handleUrlRequest();
             }
-        });
+
+            if (event.data?.route) {
+                this._handleRouteUpdate(event.data);
+            }
+
+            if (event.data?.siteData) {
+                this._handleSiteDataUpdate(event.data);
+            }
+        }
     }
 
     // The iframe can send route updates to navigate to within Admin, as some routes