JsDaddy / ngx-mask

Angular Plugin to make masks on form fields and html elements.
https://jsdaddy.github.io/ngx-mask
MIT License
1.15k stars 298 forks source link

Deleting 5 after entering say 500 causes everything to be deleted #1355

Open tedp opened 5 months ago

tedp commented 5 months ago

🐞 bug report

Is this a regression?

Not sure

Description

Deleting first number where the number is in the hundreds causes the whole number to be deleted apart from 0. This is not the case for example where the number is in the thousands

🔬 Minimal Reproduction

Using your own example https://jsdaddy.github.io/ngx-mask/#1 where the mask is set to 'separator.2' for example, enter the number 500 then delete the first number 5. You will see that the whole number is deleted leaving just 0.

If you try the same for 5000 then only the number 5 is deleted as expected

Also if you try 555 and delete the first 5 then this also works as expected

Anything else relevant?

I've tried in both Chrome and Edge on a Mac

smartredfox commented 5 months ago

It looks like the check to see if a decimal separator needs to be added needs an additional check to see if it's a zero, otherwise it adds a second decimal - this then causes issues when the later formatters run. The same issue occurs for any number where the next digit is a zero (505,000 for example becomes 0.50 when you delete the first 5).

This seems to fix it:

                if (inputValue[0] === "0" /* MaskExpression.NUMBER_ZERO */ &&
                    inputValue[1] !== "0" && /*This seems to fix it */
                    inputValue[1] !== decimalMarker &&
                    inputValue[1] !== this.thousandSeparator) {
                    // eslint-disable-next-line no-param-reassign
                    inputValue =
                        inputValue.length > 1
                            ? inputValue.slice(0, 1) +
                                decimalMarker +
                                inputValue.slice(1, inputValue.length + 1)
                            : inputValue;
                    this.plusOnePosition = true;
                }