Topic: MDBInput with Input Mask issue with existing model value

dsplank priority asked 2 years ago


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:

dsplank priority answered 2 years ago


Just to follow up on this issue, I cloned the input-mask plugin repository, implemented a couple changes to the directive code file, and was able to resolve this issue. I don't have permission to fork the repository or create merge requests, so I opened up an issue in the repository with the details and proposed code changes.


Mikołaj Smoleński staff commented 2 years ago

@dsplank thanks a lot for posting the solution for that case. We will incude it with one of the next releases.

Keep coding!



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: MDB5 1.13.0
  • Device: Laptop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No