@blur events don't fire

[cloud-tribal]

Can be easily reproduced. @blur events don't fire. @input does. Haven't tested others.

[luventa]

Yes, it wont handle blur event. If you need that here is a quick fix: add @blur="updateValue($event.target.value)" behind @import=“up... in line 2 of Cleave.vue.

[cloud-tribal]

Thanks, I think you meant @input, and just out of curiosity, what additional work would be required to add this to the codebase?

[cloud-tribal]

And btw adding that doesn't work

[luventa]

@cloud-tribal It shall work. @blur="yourcallback()" also needs to be added in cleave element as an attr,

[cloud-tribal]

No it doesn't work. Cleave component doesn't know about blur. An artificial event emitter for blur must be added in order for it to work.

  methods: {
    updateValue(value) {
      this.$emit('input', value);
    },
    blurValue(value) {
      this.$emit('blur', value);
    }
  },

[cloud-tribal]

Also I would suggest passing the actual input events themselves to @input and @blur so that you can treat them as regular inputs in the parent component.

Otherwise, when working with other inputs in a form, to obtain value of all inputs you must consider different arguments: e.target.value for regular inputs and then value (for cleave).

I can submit pull request to do this if that's ok.

Please share your thoughts. Relatively new to contributing to OSS

[luventa]

Yes, your suggestion is right, welcome PR. It's Chinese spring festival these days, I may cannot make quick response to it.

And the quick fix i mentioned shall is shown below.

Cleave.vue

<template>
  <input type="text" v-bind:value="value"
    @input="updateValue($event.target.value)" 
    @blur="updateValue($event.target.value)" />
</template>