Add blur event for validation libraries

[pareeohnos]

I'm submitting a ... (check one with "x")

[ ] Bug report => search github for a similar issue or PR before submitting
[x] Feature request
[ ] Other, please describe

A PR (#22) was opened a while back adding the blur event, and you said you couldn't see a use case and that it would mean other events would need adding. In our application, there is a use case for this, and that is when using the vuelidate where validations can be triggered when a field is blurred. Currently I cannot apply this with vue-flatpickr due to this event not being registered/emit.

I don't disagree with your statement that it may make sense then to allow other events to be added such as keyboard events, however since Vue 2.4 it is possible to simply bind all listeners provided to a component via the $listeners property.

This would allow the developer to decide which listener they wish to bind rather than vue-flatpickr having to pick and choose. I don't know the all of the code, but at a quick glance it would as simple as changing the template of the component to

<input type="text" data-input v-on="inputListeners">

and adding a computed property

inputListeners() {
  let vm = this;
  return Object.assign({},
    vm.$listeners,
    {
      input: vm.onInput,
    }
  );
}

With this change, I would be able to do something like

<flat-pickr
  v-model="model"
  :config="config"
  @blur="onBlur"
  @keydown="onKeydown">

[ankurk91]

I know about the $listeners method. But i found it buggy.
Today itself i removed this approach from one of my package, see

I am happy to add blur event.
But you can still trigger vee-validate validations like this.

import VeeValidate from 'vee-validate';
Vue.use(VeeValidate,{
     events:'input|blur|on-close'
});

The on-close event is emitted by vue-flatpickr. Above config is global but you can also limit the config to component basis.

<flatpickr name="date" v-validate="'required'" data-vv-validate-on="input|on-close">

[pareeohnos]

Ah fair enough, haven't run into any issues with it as of yet but equally haven't made a lot of use of it.
I realise that's possible on VeeValidate, but not with vuelidate. Vuelidate doesn't do any binding to inputs automatically at all, and leaves that part up to the developer.

The on-close event would work to a point, but we also allow users to manually enter the dates rather than just using the date picker, so in this scenario the on-close event would have fired before the new date had actually been entered so the blur even would be crucial here really.

[ankurk91]

Ah, i did not notice that you have written vuelidate.
I will add blur event soon, may be in few minutes.

[pareeohnos]

ah that would be amazing, thank you so much :)

[ankurk91]

@pareeohnos
Released 7.0.5, cheers!!!

[pareeohnos]

awesome thank you!!

[pareeohnos]

Just tried this out and it doesn't seem to work. I think what's happening is the input that the blur event is bound to is changed by flatpickr to the hidden input and thus never actually gets a blur event.

[ankurk91]

Oh no, the hidden input is nightmare.
I will look into, there is a workaround

[pareeohnos]

awesome thanks, sorry it took so long to report back

[ankurk91]

Please update to v7.0.6 and let me know it it works for you.

[pareeohnos]

Sorry for the delay, just got round to testing and it works perfectly. Thanks for the quick turn around