Skip to content

placeholderCharacter containing non special character as value causes issues #1519

Open
@GillesVercammen

Description

@GillesVercammen

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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions