Log in to AnswerLog in to Follow
Ana Santos
94Views
7Comments
[Custom Input Masks] Bug when deleting character in the middle of the text
Question
Forge
Custom Input Masks
Forge component by Sara Gonçalves

Hi,

I'm currently facing a weird bug when deleting an alpha character in a masked input that contains both alpha and numeric characters.

As an example, imagine that I have the input text GHI1234 and delete the I. If I then move the cursor to the end of the text and then hit backspace multiple times, I'll get the following sequence:

  • GH124 (note that this should be GH123)
  • GH14
  • GH4 -> at this point, I'm not able to delete any more characters

Please note that this only happens when deleting an alpha character. If I delete a numeric character and then move the cursor to the end of the text and delete, it works as expected.

I have left the MaskDefinition empy and have the following in the AdvancedOptions field:

"{regex:'([Gg][A-Za-z]{2}\\d{4})', placeholder: '', autoUnmask:true, showMaskOnFocus: false, showMaskOnHover: false, casing: 'upper'}"

Does anyone know what might be the issue in here?

Thanks in advance, 

Ana Santos 

0
0
on 2020-02-04

Hi,

I think your regex is dictating to have two characters at beginning with G at start and have 4 at end. Hence when you reach GH4 you cannot delete.

Regards.

0
0
on 2020-02-05

Hi Ana, 


I have check with your regex in sample app. Yes, there are same issue as you have shared. In my sample app i have change regex and checked, it is working fine for alphanumeric character. Please use this in your app and check.


"{regex:'([a-zA-Z0-9]*', placeholder: '', autoUnmask:true, showMaskOnFocus: false, showMaskOnHover: false, casing: 'upper'}"

  

Hope this will help you. 

0
0
on 2020-02-05

Hi, 

First of all, thanks for your replies. My requirement is that I have the text in the exact following format "GLLNNNN", where L is a letter and N is a number. So, the regex that Jitender suggested would not work for my use case. 

Also, please note that if I mess around with the place where I place the cursor, I'm sometimes able to delete it.

Thanks.

0
0
on 2020-02-05

Hi,

Do you really need that advance option? with that advance option and regex, the behavior is expected

  •  If no, try like below, one down side is user cannot enter or delete first character as its hard coded but this will have visual clue on where a particular character can be added/deleted.

  • If yes then better approach is remove the custom mask on this field and validate with regex in server action and throw validation message that you require in GXXNNNN format.

Regards.

0
0
on 2020-02-05

Hi Prasad,

I don't see how that's the expected behaviour. The regex I'm using states that the text should have one letter G, followed by exactly two letters, and then exactly 4 digits. The 4 is a quantifier operator and it does not mean that the input should have a 4 at the end.I just used "GHI1234", but the issue will exist no matter which letters and digits are placed after the "G".

Thanks.

0
0
on 2020-02-05

Update: After running a few more test scenarios, I found out that, when deleting a letter from the input, the cursor moves its position, but hitting backspace/delete is acting upon the previous position. So, using the same example:

GHI1234 -> if I delete "I", the cursor moves to between 1 and 2. So, if I hit the delete key, I'm expecting that it will delete number 2, but instead, it is deleting the 1 (which is actually what was expected if the cursor had not jumped from its position). 

0
0
on 2020-02-05

Hi,

I am not an expert on Regex, based on my observation this component is adding the placeholder character after you hit backspace/delete, I believe this is the reason you see that cursor moving. Try removing the advance option or try below config, you will not have issue of deletion or other option is try server side validation.

I also tried it in JSFiddle with the original JS component (https://github.com/RobinHerbots/inputmask) and had similar kind of deletion issue there.

Regards.

0
0
on 2020-02-06
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.