Expected behavior

Using the MDBInput component with Input Mask plugin (see snippet below), clicking into the input field, then clicking outside of the field (so that it loses focus), the model value that was previously there should remain there.

In the mdbInputMask.js code, when the ImageMask class calls the _init() function, there should be logic to check for an existing value in the input element and run the same functionality that is done in the _handleInput event callback. This will ensure all of the class properties get initialized to the correct values.

Actual behavior

There is no check for an existing input element value and so the InputMask class properties are not initialized to what they should be. When clicking into the MDBInput component, then clicking outside of the component to trigger the _handleBlur event callback, the InputMask class property "_isCompleted" is still false which triggers the _uncoverPlaceholder function. This clears out the input element's value and sets the placeholder to the input mask (which was originally set to never show up based on "inputPlaceholder" being passed in as "false"). When I start typing into the input field, the value and mask start over from nothing.

If I click into the input field, then hit backspace, the model value is kept and the last digit of the phone number is removed from the masked input. The _handleInput event callback was triggered and the InputMask class properties were initialized correctly. This just needs to happen on the initial call to _init().

Resources (screenshots, code snippets etc.)

import { MDBInput, mdbInputMask } from "mdb-vue-input-mask"

<MDBInput
    type="tel"
    label="Phone Number"
    v-model="inputValue"
    :inputMask="{ 
        mask: "(999) 999-9999", 
        maskPlaceholder: false, 
        inputPlaceholder: false, 
        clearInput: true 
    }"
    @input="handleUpdate" />

const inputValue = ref("(111) 123-4567");

function handleUpdate(event) {
    console.log("updated value = " + event.target.value);
}

1. When input field is first loaded:
2. Clicking into input field:
3. Clicking out of input field:
4. Clicking back into input field: