在元素未聚焦之前未添加或删除 BeforeUnload 侦听器

Question

I am working on a generic app that lets the user type in a formular and save, yadda yadda. I want to ensure that the user is warned whenever changes aren't saved, both through a prompt triggered by in-App routing and by the beforeunload event. Both are supposed to be active when there has been changes, but revert to inactive if there aren't any changes/the form is empty. The first works flawlessly. The second one, the "beforeunload" event is also readded and removed, but only if the input element that triggers a change to the "isEmpty / isDifferent" state is unfocused first. This is annoying because it doesn't provide instant feedback when the user starts typing, because the user is allowed to leave the page unwarned by refreshing even if the field isn't empty, because he hasn't unfocused the input. Or the user isn't "allowed" to leave the page, even if the input field is empty, because he didn't unfocus it before trying refreshing the page.

Here is the relevant code:

handleBeforeUnload (e) {
      console.log('leaving')
      e.preventDefault()
    },
    leaving (preventDefault) {
      if (preventDefault) {
        window.addEventListener('beforeunload', this.handleBeforeUnload)
        console.log('should be added')
      } else {
        window.removeEventListener('beforeunload', this.handleBeforeUnload)
        console.log('should be removed')
      }
    }
  },
  components: {
    'form-input': Input,
    modal: Modal
  },
  watch: {
    isEmpty () {
      this.leaving(!this.isEmpty)
    }
  },

Right now I have only configured the component to work on new documents, which is why I am only using "isEmpty" as a state right now. The chain works as intended up until the "handleBeforeUnload" method, which can only be triggered if the user refreshes or similar after the input has been unfocused. I am speculating that this behavior might be a result of Vue's lifecycle hooks, particularly "beforeDestroy" but I am not sure. What is causing this behavior? Thanks in advance.

Answer 1

Solved : This has been confirmed as a side effect of me using the "change" handler on the input fields, aka what seems to be the intended behavior of the change handler. The DOM isn't updated before a "blur" event and this was discovered when I tried to disable the submit button through validation which resulted in the same issue. Exchanging the "change" event on the input elements for a "keyup" solved this issue.