JsDaddy / ngx-mask

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

Keep decimal point while editing input with separator mask #1377

Open Ozmercer opened 1 week ago

Ozmercer commented 1 week ago

🐞 bug report

Is this a regression?

Not sure.

Description

If using a separator mask (e.g. mask="separator.2") with decimal digits, and then deleting the decimal digits, the decimal point get automatically removed. I am trying to keep the decimal point, so a user will not have to re-enter it when amending a value in the input.

The expected behaviour is similar to that of the Angular number pipe.

🔬 Minimal Reproduction

Using your own example in https://jsdaddy.github.io/ngx-mask/#3 with the input 1.23: If using backspace twice I would expect the value to be 1.. In this case I could type in 56 to get 1.56. In practice, typing that input would result with 156, unless the decimal point is manually added. This should of course only be expected while still editing the value. Once losing focus, I would expect 1. to be converted to 1.

🌍 Your Environment

Angular Version:


Angular CLI: 17.1.3
Node: 20.11.1
Package Manager: npm 10.2.4
OS: darwin arm64

"ngx-mask": "16.2.9",

Anything else relevant? I've tried in both Chrome and Edge on a Mac

Ozmercer commented 6 days ago

Possible fix:

If a new input is added to the mask: allowTrailingDecimalMarker: boolean = false Then the logic for removing the trailing decimal marker can become optional:

In ngx-mask-applier.service.ts line 294:

if (!this.allowTrailingDecimalMarker) {
    // eslint-disable-next-line no-param-reassign
    inputValue = this._compareOrIncludes(
        inputValue[inputValue.length - 1],
        this.decimalMarker,
        this.thousandSeparator
    )
        ? inputValue.slice(0, inputValue.length - 1)
        : inputValue;
}