Text-mask: VueJS - RawValue is not "Raw"

[douglasdtc]

We have a conditional mask, for Brazillian documents (CPF/CNPJ). Our "mask" function is defined as:
mask(rawValue) { if(rawValue.length > 11) { return [/\d/, /\d/, '.', /\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/]; } else { return [/\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, '-', /\d/, /\d/]; } }

However, after inputing the first value into the field, it automatically switchs to the mask as if it had more than 11 characters. While debugging, rawValue is sent with placeholders.

Is it possible to send the actual raw, unmasked value?

Thank you.

[Guichaguri]

Use a regular expression instead, here is a quick one:

const regex = /\D/g;

function mask(value) {
    const rawValue = value.replace(regex, '');

    if(rawValue.length > 11) {
        return [/\d/, /\d/, '.', /\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/];
    } else {
        return [/\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, '.', /\d/, /\d/, /\d/, '-', /\d/, /\d/];
    }
}

It sanitizes the input first, keeping only the numbers and removing everything else.

[douglasdtc]

Thank you for tip @Guichaguri .
This is true for this mask, however, if I have a more complex mask, I'll have to do a replace for each one. The documentation says this is the RawValue, however, it is not.

Shouldn't that be fixed? Or maybe, another method/prop that exposes the rawValue.

[Guichaguri]

It is the raw value directly from the key up input event. It may or may not have the previous placeholder characters. In my experience, sanitizing with regex was easy enough to solve any of those conflicts, even because you probably have to sanitize the input in the server anyway.