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

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

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)