De-duplicate event handling to prevent errors on Draw-io

owncloud · Mar 13, 2023 · 8d84102 · 8d84102
1 parent 1bb1ea4
commit 8d84102
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 24 deletions.
diff --git a/changelog/unreleased/bugfix-drawio b/changelog/unreleased/bugfix-drawio
@@ -0,0 +1,6 @@
+Bugfix: De-duplicate event handling to prevent errors on Draw-io
+
+If users navigated out of Draw-io and returned afterwards, old event handlers were kept, which failed trying to look for iframes that no longer existed.
+This fix removes the handlers when exiting, preventing these user visible errors.
+
+https://github.com/owncloud/web/pull/8576
diff --git a/packages/web-app-draw-io/src/App.vue b/packages/web-app-draw-io/src/App.vue
@@ -77,30 +77,10 @@ export default defineComponent({
   created() {
     this.filePath = this.currentFileContext.path
     this.fileExtension = this.filePath.split('.').pop()
-    window.addEventListener('message', (event) => {
-      if (event.data.length > 0) {
-        if (event.origin !== this.config.url) {
-          return
-        }
-        const payload = JSON.parse(event.data)
-        switch (payload.event) {
-          case 'init':
-            this.fileExtension === 'vsdx' ? this.importVisio() : this.load()
-            break
-          case 'autosave':
-            if (this.isAutoSaveEnabled) {
-              this.save(payload, true)
-            }
-            break
-          case 'save':
-            this.save(payload)
-            break
-          case 'exit':
-            this.exit()
-            break
-        }
-      }
-    })
+    window.addEventListener('message', this.handleMessage)
+  },
+  beforeUnmount() {
+    window.removeEventListener('message', this.handleMessage)
   },
   methods: {
     ...mapActions(['showMessage']),
@@ -142,6 +122,30 @@ export default defineComponent({
         this.errorPopup(error)
       }
     },
+    async handleMessage(event) {
+      if (event.data.length > 0) {
+        if (event.origin !== this.config.url) {
+          return
+        }
+        const payload = JSON.parse(event.data)
+        switch (payload.event) {
+          case 'init':
+            this.fileExtension === 'vsdx' ? this.importVisio() : this.load()
+            break
+          case 'autosave':
+            if (this.isAutoSaveEnabled) {
+              this.save(payload, true)
+            }
+            break
+          case 'save':
+            this.save(payload)
+            break
+          case 'exit':
+            this.exit()
+            break
+        }
+      }
+    },
     async loadFileContent() {
       try {
         const response = await this.getFileContents(this.currentFileContext)