Cannot delete static characters using function masks

[iinuwa]

When passing a function to the v-mask argument, static characters cannot be backspaced by the user as they might expect.

This may be related to #422, in that if all characters between the cursor up to and including the last placeholder character were removed on backspace, this would function as expected.

V-Mask and Vue versions

2.2.3, 2.6.12

Reproduction Link

https://jsfiddle.net/zprb2txv/

Steps to reproduce

1. Pass a function to the mask that defines a placeholder character after a static character
2. Enter input beyond the static character.
3. Try to backspace

What is Expected?

Static character is removed, and backspacing can continue.

What is actually happening?

Static character remains after backspacing. User must move the cursor to the number then backspace to clear the character.

[cll0ud]

I also faced this problem and I found a workaround.

Instead of having a function as your mask, just store the static mask in your data object and update it on the input event of the masked field:

<v-text-field
  v-mask="mask"
  :value="value"
  placeholder="(99) 99999-9999"
  :label="label"
  @input="input"
/>

export default {
  data: () => ({
    mask: '(##) ####-####'
  }),
  methods: {
    input(ev) {
      if (ev && ev.length > 14) {
        this.mask = '(##) #####-####'
      } else {
        this.mask = '(##) ####-####'
      }
      this.$emit('input', ev)
    }
  }
}

This also solves another problem that I had when I needed to clear masked inputs, sometimes when using functions masks they simply wouldn't clear.

Note: If you're not using Vuetify your input event is probably different than mine.

[reisnobre]

This doesn't solves the issue, because I kinda need complex validation that only functions can provide