beholdr / maska

Simple zero-dependency input mask for Alpine.js, Svelte, Vue.js and vanilla JS.

Home Page:https://beholdr.github.io/maska

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Cannot use dynamic mask

echjordan0 opened this issue · comments

Describe the bug

When using an array or function for the mask it does not work as expected.
With an array mask :mask="['#####', '#####-####']" I am able to enter two characters and then nothing happens (no errors).
Screenshot 2024-03-05 at 4 55 34 PM

With a function mask v => v.length> 5 ? '#####-####' : '#####' the function is displayed as text on input.
Screenshot 2024-03-05 at 4 55 59 PM

Static mask value mask="#####" works fine.

Parent component

  <c-masked-text-field
    v-bind="$attrs"
    :id="id"
    :value="value"
    type="tel"
    name="zip"
    :label="label || $t('ZIP Code')"
    :mask="['#####', '#####-####']"
    :minlength="minlength"
    :maxlength="maxlength"
    :data-test="dataTest"
    :rules="localRules"
    pattern="[0-9]*"
    autocorrect="off"
    autocapitalize="none"
    :placeholder="placeholder || '12345'"
    @input="onInput"
    v-on="$listeners"
  />

Child component template

<template>
  <c-text-field
    v-bind="$attrs"
    v-maska="maskaValue"
    :data-maska="mask"
    :data-maska-tokens="tokens"
    :value="maskaValue.masked"
    :minlength="minlengthProxy"
    :maxlength="mask.length"
    @input="$emit('input', maskaValue.unmasked)"
  />
</template>

Child component JS

@Component({
  directives: { maska: vMaska as DirectiveFunction },
})
export default class CMaskedTextField extends Vue {
  maskaValue: { masked: string; unmasked: string; completed: boolean } = {
    masked: '',
    unmasked: '',
    completed: false,
   };
...

 @Prop({ type: String, default: '' }) value!: string;
 @Prop([String, Array, Function]) mask!: MaskType;
...

 created(): void {
    this.maskaValue.masked = this.value;
  }

Steps to reproduce

Which steps do we need to take to reproduce the problem?

Reproduction link

Link to online sandbox with reproduction code.
You could use these as starters: vue / vanilla

Could you please provide a minimal reproduction link?

Closing until reproduction link provided, sorry.