What is the best way to handle spurious drag/drop events during development?

Question

Forgive the oddball question, but I am having an issue with drag/drop events during electron development.

The issue is this:

• During development (Vue / Electron-builder etc) I am running in "electron-builder:serve" mode, which respawns the application browser window when I change some code. This is good, as it saves time and prevents the compiler from re-compiling all my javascript for just a small change.
• Unfortunately, it appears that there is some sort of DOM instance still hanging around, because if I attempt to "drop" a file on my application window, I get twice as many files triggering events. In fact, I get as many events as 'respawns' I have done of my application window.
• Eventually this gets annoying and I shutdown the dev server and have to restart it again, so I only get the one event.

I hope this is explaining the problem adequately. There is no code involved in this question, just an environmental setup query - I'd ideally like for the application to only have to handle a single drop event each time I 'respawn' during development.

I don't foresee this as being a production issue, but more a development annoyance.

Answer 1

I had a similar issue with keydown events which got duplicated during server mode. I solved this with lifecycle hooks:

Vue 2:

mounted() {
    window.addEventListener('keydown', this.onKeyDown);
},
destroyed() { // or maybe beforeDestroy
    window.removeEventListener('keydown', this.onKeyDown);
}

Vue 3 Composition API:

onMounted((): void => {
    window.addEventListener('keydown', onKeyDown);
});
onBeforeUnmount((): void => {
    window.removeEventListener('keydown', onKeyDown);
});

Maybe this applies to your code as well.