Cursor jumps on multi mask

[twesk]

🐞 bug report

Is this a regression?

Unknown

Description

I'm trying to set up a mask that has 2 options. When characters are <= 10, the mask is `(000) 000-0000` and when it's >10 and <=15, the mask is `+000000000000000`. Both masks work fine, but when you move from 11 characters to 10, the cursor jumps from the end of the string to a few spaces to the left. I imagine it's because of the differences in masked characters, and I see this issue has been brought up in the past and supposedly fixed, but it is not working properly for me. Please see the stackblitz of the issue occuring.

🔬 Minimal Reproduction

This stackblitz starts with your template but it seems outdated:
https://stackblitz.com/edit/angular-ivy-mask-rk2fpm?file=src%2Fapp%2Fapp.component.html

So I also made a stackblitz using Angular 17 and ngx-mask 17.0.7
https://stackblitz.com/edit/ngx-mask-cursor-issue?file=src%2Fmain.ts

type: 12345678901, it'll show +12345678901, then backspace makes it (123) 456-7890 correctly but the cursor ends up next to the 7 instead of at the end of the string.

🔥 Exception or Error

🌍 Your Environment

Angular Version:

Angular CLI: 17.3.3
Node: 18.18.0
Package Manager: npm 10.2.3
OS: linux x64

Angular: 17.3.2
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1703.3
@angular-devkit/build-angular   17.3.3
@angular-devkit/core            17.3.3
@angular-devkit/schematics      17.3.3
@angular/cli                    17.3.3
@schematics/angular             17.3.3
rxjs                            7.8.1
typescript                      5.3.3
zone.js                         0.14.4

Anything else relevant?

[andriikamaldinov1]

@twesk Thanks for using Ngx-mask. Please update to latest version.
It example all work as expected - https://stackblitz.com/edit/ngx-mask-cursor-issue-2ug2tt?file=package.json,src%2Fmain.ts

[twesk]

Thanks for the fix. Unfortunately, it appears to have created a new but related bug. In your new stackblitz https://stackblitz.com/edit/ngx-mask-cursor-issue-2ug2tt?file=package.json,src%2Fmain.ts please try the following:

input: 1234567890
(will look correctly like (123) 456-7890 )
Move the cursor next to 4 and delete the 4
The cursor will jump to the end leaving you with (123) 567-890 and the cursor at the end.

Not sure if this should go into a new bug ticket

[andriikamaldinov1]

@twesk Please update to latest version.
It example all work as expected - https://stackblitz.com/edit/ngx-mask-cursor-issue-2ug2tt?file=package.json,src%2Fmain.ts