It is impossible to enter more than 4 digits in input, when thousandSeparator="," is used on input

[volodymyrmilovanov2022]

🐞 bug report

Is this a regression?

Yes, the previous version in which this bug was not present was: 16.3.5

Description

When I use mask="separator.2" and set thousandSeparator="," on input, i cannot enter more than 4 digits. It was Ok when i had 16.3.5 version, and has been broken after update to 17.0.7

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-17-starter-project-evcdxx?file=src%2Fmain.ts

🌍 Your Environment

Angular Version:17

Anything else relevant?

[LYSBALL]

I am facing the same issue, the problem started in 17.0.5 Version 17.0.4 works fine for me.

[AbbTek]

Same issue here 17.0.4 works fine for me.

[russcarver]

This is still an issue after I upgraded to Angular 17.3.6 (from 16.2.12) with ngx-mask 17.0.7. I was using ngx-mask 16.4.2 with Angular 16.2.12 and it was working fine.

After downgrading and trying 17.0.0, 17.0.1, 17.0.2, 17.0.3, 17.0.4, and 17.0.7 (all tested) as well as 16.4.2 (with Angular 17.3.6) it still is broken.

My has the following:

<input aria-labelledby="seedAmountLabel" autocomplete="off" formControlName="seedAmount" mask="separator.2" matInput prefix="$" thousandSeparator=",">

When I create my FormGroup, this FormControl is of type: FormControl<undefined | string> and the default value is undefined.

Removing "aria-labelledby", and "autocomplete" had no effect.

Here's what happens: When I type "1234", it's fine. When I add "5", it becomes "123". When I then add "6", it becomes "1236". When I then add "7", it becomes "123" again and so on. It will not allow me to enter a decimal point nor numbers after it.

This puts my Angular 17 upgrade ON HOLD until this can be resolved.

---

UPDATE: After setting the ngx-mask version to 17.0.4, clearing all node_modules & cache directories, and reinstalling everything, it appears to be working.

[joshuaGnol]

Having same issue with version 17.0.8 using FormControl When input number 12345, it will return as 123.00

https://stackblitz.com/edit/angular-txwonf?file=package.json,src%2Fmain.ts,src%2Fkarma.conf.js

[arielZusman]

adding the decimalMarker="." solved the issue for me

[thealexfranklin]

decimalMarker="."

yep. this did the trick.

[andriikamaldinov1]

@volodymyrmilovanov2022 @LYSBALL @AbbTek @russcarver @joshuaGnol @thealexfranklin Thanks for using Ngx-mask. Please update to latest version. It example all work as expected - https://stackblitz.com/edit/angular-17-starter-project-bkcx3g?file=src%2Fmain.ts