mask.completed works incorrect with optional tokens

[maxmaxme]

Describe the bug

mask.completed returns false if the mask contains optional tokens

I inserted the optional token 0 and expect the method returns true

Steps to reproduce

const mask = new Mask({
    mask: "#-#0",
    tokens: {
      "0": { pattern: /[0-9]/, optional: true },
    },
})

mask.completed("12") // = false

Reproduction link

https://stackblitz.com/edit/js-maska-k9z3pf?file=index.js

[mateuswetah]

Yeah I'm facing the same issue trying to implement this:

 v-maska
 data-maska="(##)########0"
 data-maska-tokens="0:[0-9]:optional"

The completed event only fires with all the values inserted. Are we misunderstanding the optional usage @beholdr?

[fsblemos]

Same happening here but with an array of masks. It only returns completed after filling the larger one.

Reproduction link:

https://stackblitz.com/edit/vue-maska-kwct9s?file=src%2FApp.vue

[beholdr]

I'm afraid it's too complicated logic to determine which token is optional. It's just checking mask length.

[fsblemos]

@beholdr isn't this behavior different from the expected? Why not to consider completed as soon the first mask matches?

[beholdr]

Hmm, I'm not sure that the mask should be marked as completed when it still has some characters to input. That was the initial logic.

[fsblemos]

Just to point out my use case, if I have the masks ['##', '####'], I would expect completed to be true only if it is informed 00 or 0000. If the value is 0 or 000 I expect it to be false.

I was considering the completed to be true when "informed value fullfills one of the masks", is that right?

[beholdr]

After further consideration, I think your logic is valid for dynamic masks. I'll try to implement this.

[beholdr]

@fsblemos implemented in 3.0.0-beta5, could you please test it?

[fsblemos]

thank you @beholdr! just tested here and it works :)

https://stackblitz.com/edit/vue-maska-kwct9s?file=src%2FApp.vue

Just a question, in v2 I was able to track both completed and unmasked in the boundedObject. How can I do this with args and modifiers on v3? Maybe it worths to add an example of multiple args in the docs.

[beholdr]

With new directive syntax, in v3 you can use only one modifier, so if you need both completed and unmasked values you can use @maska event. Example here: https://stackblitz.com/edit/vue-maska-g52giw?file=src%2FApp.vue

[fsblemos]

Got it, didn't know about this event. Maybe I'll simply use <input v-maska="options" @maska="e => boundObject = e.detail" /> then. Thank you