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).
With a function mask v => v.length> 5 ? '#####-####' : '#####'
the function is displayed as text on input.
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.