ngx-mask icon indicating copy to clipboard operation
ngx-mask copied to clipboard

placeholderCharacter containing non special character as value causes issues

Open GillesVercammen opened this issue 7 months ago • 0 comments

Is this a regression? No

Description ngx-mask provides a way to overwrite the default _ character as placeholder when showMaskTyped is true. I now had the requirement to have this placeholderCharacter be a non-special character. a regular 'X'. As of the docs, i didn't read anywhere whether this would cause issues or not.

But i soon noticed that use 'X' as a placeholderCharacter introduced some bugs. First of all it added the character to the actual model, which it doesn't do for the special characters (even if dropSpecialCharacter=false). I would have expected to just never have the placeholderCharacter in the model.

2nd bug you can best see in my reproduction demo below. When i have a mask with 'X' as placeholderCharacter InputTransformFn, when i start typing with a lowercase character. It moves the cursor to the end of the input. It works as expected when typing digits and uppercase characters. But when typing a lowercase character it has this weird behavior.

🔬 Minimal Reproduction https://stackblitz-starters-st2qnr8f.stackblitz.io/ https://stackblitz.com/edit/stackblitz-starters-st2qnr8f?file=src%2Fmain.ts

So i'm not sure if this is an actual bug, or if the placeholderCharacter should just be restricted to only have special characters allowed?

EDIT: I just noticed another problem in the normal behavior. When i have the code as in the stackblitz with the * as placeholderCharacter and i fill in the whole mask. then move my cursor to a specific character and type a lowercase character. The cursor again moves to the end. This does not happen for the uppercase and digits.

GillesVercammen avatar Mar 14 '25 13:03 GillesVercammen