RonaldJerez / vue-input-facade

A lightweight and dependency free input masking library created specific for Vue
https://ronaldjerez.github.io/vue-input-facade/latest/
182 stars 27 forks source link

Empty value on some devices #53

Closed deraw closed 2 years ago

deraw commented 2 years ago

Describe the bug Hi, I'm faced with a bug that I really don't understand and that I'm unfornutalety unable to reproduce.

I'm using the directive v-facade on a VTextField from Vuetify, and in some cases it seems that we're unable to retreive the value entered by the user, resulting in null values in our logs.

Here's the implementation of one of the component where we're using Vue Input Facade:

<template>
    <VTextField
        v-facade="mask"
        :value="computedValue"
        :prepend-inner-icon="phoneIcon"
        label="Phone"
        @input.native="setInternalValue"
        @change="emitChangeEvent"
    />
</template>

<script lang="ts">
    import Vue from 'vue';
    import Component, { mixins } from 'vue-class-component';

    interface InputFacadeEvent extends Event {
        target?: {
            unmaskedValue: string;
        };
    }

    const Props = Vue.extend({
        props: {
            value: {
                type: String,
                default: undefined
            }
        }
    });

    const MixinsDeclaration = mixins(Props);

    @Component({
        model: {
            prop: 'value',
            event: 'change'
        }
    })
    export default class PhoneField extends MixinsDeclaration {
        internalValue: string | null = null;

        mask = '## ## ## ## ##';

        get computedValue(): string | null {
            return this.value ? this.formatPhone(this.value) : null;
        }

        formatPhone(value: string): string {
            const phone = value.match(/.{1,2}/g);

            if (!phone) {
                return '';
            }

            return phone.join(' ');
        }

        setInternalValue(event: InputFacadeEvent): void {
            const unmaskedValue = event.target?.unmaskedValue ?? null;
            this.internalValue = unmaskedValue;
        }

        emitChangeEvent(): void {
            this.$emit('change', this.internalValue);
        }
    }
</script>

We're using event.target?.unmaskedValue, maybe this is related to our issue?

Devices

We're seeing this behavior on different devices, such as:

I'm sorry to open a bug report with so little information, hopefully you might be able to help us in some way!

RonaldJerez commented 2 years ago

Vuetify does a lot to their inputs under the hood, which makes it hard to properly integrate with it, I would recommend you try using v-model with your input and see if that helps.

additionally I see you have a mask set, then you try to format your input yourself as well. There should be no reason to do that, that’s what Input facade is suppose to be taking care for you. Since your internal value is been formatted with spaces then I would recommend you just use the masked value.