[Cleave.js] Extra symbol is added after input has lost focus (if you type more than the mask's limit)

[dmtrbrl]

Overview of the problem

Buefy version: 0.8.6
Vuejs version: 2.6.10
OS/Browser: macOS/Chrome

Description

Extra symbol is added after input has lost focus (if you type more than the mask's limit)

Steps to reproduce

1. Open example from docs in Codepen
2. Focus on input
3. Type more symbols than mask expects
4. Click somewhere else

The weird thing is that I can reproduce this bug on Codepen and locally.
But on docs page everything works fine.

[jtommy]

Probably is something about Vue 2.6.x because the doc is working with Vue 2.5.x

[4KDA]

Found a solution?

[service-paradis]

It seems the problem is not only with Buefy, but with Vue in general (nosir/cleave.js#459, https://forum.vuejs.org/t/custom-directive-not-working-well-with-last-character-cleave-js-value-sync/63990).

[hoquangthaiholy]

Hi all, I think this can fix this problem temporarily

Vue.directive('cleave', {
    bind(el, binding, vnode) {
        const input = el.querySelector('input')
        input._vCleave = new Cleave(input, binding.value)
        input.addEventListener('input',(e) => {
            vnode.componentInstance.newValue = e.target.value
        })
    },
    unbind(el) {
        const input = el.querySelector('input')
        input._vCleave.destroy()
    }
})

Hope can see Cleave.js fix it in the future

[gutisalex]

Hi all, I think this can fix this problem temporarily

Vue.directive('cleave', {
    bind(el, binding, vnode) {
        const input = el.querySelector('input')
        input._vCleave = new Cleave(input, binding.value)
        input.addEventListener('input',(e) => {
            vnode.componentInstance.newValue = e.target.value
        })
    },
    unbind(el) {
        const input = el.querySelector('input')
        input._vCleave.destroy()
    }
})

Hope can see Cleave.js fix it in the future

Aaaah, I was looking forward to see this kind of fix! But unfortunatly it doesnt really fix this issue because the extra symbol still makes it into the variable. It is just not getting displayed anymore! And that is actually even worse, because the user doesnt know about what is going on, because he doesnt see the extra symbol anymore!

You can check on that when you put a watcher on the variable you are writing to!

[gutisalex]

Just figured a workaround for this... plain simple, just dont use v-model! Use 2 way binding instead like mentioned here...

Example:
In your template:
<b-input v-cleave="mask" :value="someValue" @input.native="onInput" />

In your script:
onInput(event: any) { this.someValue= event.target._vCleave.getFormattedValue(); }

[harlet]

Or nosir/cleave.js#459 (comment)

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.