Blur event not supported

It would be really awesome to add some of the native browser events to the input, for example Im trying to tie Vuelidate in with the @blur event.

I might make a pull request for this, but the simplest solution I can think of is to add:

@blur="emit('blur')

to the input. This could also be the case for any other native events you want to support.

[agm1984]

That is very fascinating. I was able to reproduce that by installing a v-if on my wrapper component. The issue is that v-if removes the datepicker input element from the DOM, and then the Vue instance is destroyed after, which means beforeDestroy is called after the DOM element has already been removed.

I have a new solution now which is simpler (and should be closer to an “Occam’s Razor” solution). It uses event delegation and relies on the focus and blur events bubbling up the DOM tree into your wrapper component.

Try this instead:

markup:

<div @focusin="handleFocus" @focusout="handleBlur">
    <datepicker
        @input="handleChange"
        :name="name"
    ></datepicker>
</div>

note: We are not using the id prop anymore. We simply place focusin and focusout events on the wrapper for the datepicker. In my testing here, it does not work if you place them on the <datepicker>. It must be on the parent.

instance methods:

handleFocus() { console.log('focus in'); this.$emit('focus'); },
handleBlur() { console.log('focus out'); this.$emit('blur'); },

I also learned along my way that memory leaks are fine in modern browsers because when DOM elements are removed, their event listeners are garbage collected. This is only an issue in IE7 which Vue does not support. So technically, you could delete the beforeDestroy lifecycle method and never run into any trouble, but I personally am not a fan of that. I prefer the event delegation solution due to its minimal surface area.

[agm1984]

NOTE: This solution has an issue, which has been corrected in a below post.

Here is a work-around I’ve been using:

<datepicker
    :id="datePickerId"
    :name="name"
></datepicker>

…

computed: {
    datePickerId() { return `date-picker-${this.name}`; },
},

mounted() {
    document.getElementById(this.datePickerId).addEventListener('focus', this.handleFocus);
    document.getElementById(this.datePickerId).addEventListener('blur', this.handleBlur);
},

beforeDestroy() {
    document.getElementById(this.datePickerId).removeEventListener('focus', this.handleFocus);
    document.getElementById(this.datePickerId).removeEventListener('blur', this.handleBlur);
},

methods: {
    handleFocus() { this.$emit('focus'); console.log('date picker focused'); },
    handleBlur() { this.$emit('blur'); console.log('date picker blurred'); },
},

If you are not using the name prop, note that multiple date pickers on the page with the same ID will be problematic for `getElementById.