diff --git a/changelog/unreleased/bugfix-drawio b/changelog/unreleased/bugfix-drawio new file mode 100644 index 00000000000..a5da0ca9cd4 --- /dev/null +++ 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 index 30d0c57c245..5d52b821d34 100644 --- 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)