The cursor jumps to the end of the line after changing the mask

[Bartłomiej Gaweł]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

When I change the mask, the cursor jumps to the end of the line.

Expected behavior

Ideally, the cursor should stay in the same position.

Minimal reproduction of the problem with instructions

https://stackblitz.com/edit/angular-5p7fvw?file=src/main.ts

Reproduction: Go the the website above and try to type 12. Then move the cursor to the beginning and type 3.

Current behavior: The cursor jumps to the end of the line just after 2.

Expected behavior: The cursor should stay just after 3.

What is the motivation / use case for changing the behavior?

Let's say that you want to mask a credit card number. You can detect a credit card type and therefore apply an appropriate mask. Unfortunately, when I change the mask, the cursor jumps to the end of the line which can be confusing.

Environment

Angular version: 15.2.5

Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [x] Firefox version XX
- [x] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [x] Edge version XX
 
For Tooling issues:
- Node version: 18.4.0
- Platform:  Mac

Do you have any recommendation how to mitigate this problem?

[codeflowapp]

Start a new pull request in StackBlitz Codeflow.

• angular-5p7fvw (Open reproduction)

[Dharmen Shah]

Did you check if this issue exists in original library?

[Bartłomiej Gaweł]

I've checked it and unfortunately it also exists in the original library. Therefore, I guess we cannot do much with that. The closest approach is to add multiple masks in the following way:

createMask({
  mask: ['9999 999999 99999', '9999 9999 9999 9999'],
  jitMasking: true,
});

But of course it allows you to type an incorrect mask even though you know there's only one correct format.

I've achieved the desired approach by writing a custom mask.

Nevertheless, thank you for your suggestion and we can close this issue.