Topic: mdbInputMask problem with copy-paste value

Piotr Mszyca premium asked 6 months ago


*Expected behavior*On input text field with mdbInputMask="999-999-99-99" when copy paste value "0123456789" I would expect to see in the input field value like: "012-345-67-89" it means value properly formatted with defined mask.

*Actual behavior*However, the mdbInputMask directive, instead of inserting dashes "-" at particular positions it replaces the digits with dashes what is strange and unexpected because it breaks the source value. From the example above the input field value is like "012-456-89-"

Resources (screenshots, code snippets etc.)

<mdb-form-control>
  <input mdbValidate mdbInput
         mdbInputMask="999-999-99-99"
         [maskPlaceholder]="false"
         [clearIncomplete]="false"
         [validateSuccess]="false"
         type="text"
         [id]="'id_nip'"
         class="form-control"
         [formControl]="formControl"/>
  <label mdbLabel class="form-label" [ngClass]="{'required': required}"
         [for]="'id_nip'">{{ formControlLabel() }}</label>
</mdb-form-control>

Rafał Seifert free commented 6 months ago

It seems our plugin has some problem with handling complex values inserted at once into input. We will add this case to our to-do list and we will try to make it work. Thinking of a workaround I would suggest reacting to user pasting whole NIP number and converting it from "0123456789" to "012-345-67-89" as such input works.



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: Premium
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 6.0.0
  • Device: PC
  • Browser: chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No