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

ngx-mask appends zero's when using a date mask in combination with leadZeroDateTime=true #1307

Closed dsteegen closed 6 months ago

dsteegen commented 7 months ago

🐞 bug report

Is this a regression?

Yes, the behaviour was correct in version 15.0.0 but is broken in version 15.2.3 (or somewhere in between).

Description

On the Stackblitz example below, enter the value 15-02-2024 in the input. Afterwards try to clear the value using the backspace. The expected result would be an empty input. However, the library seems to add a few zero's instead. This is most probably caused by the leadZeroDateTime property. When setting leadZeroDateTime to false, this issue does not occur (but will obviously result in different behaviour)

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-13-ajxhoj?file=src%2Fapp%2Fapp.component.ts,package.json,src%2Fapp%2Fapp.component.html

🔥 Exception or Error

No errors are logged in the console.

🌍 Your Environment

Angular Version:


"dependencies": {
    "@angular/animations": "^15.1.1",
    "@angular/cdk": "^15.1.1",
    "@angular/cdk-experimental": "^15.1.1",
    "@angular/common": "^15.1.1",
    "@angular/compiler": "^15.1.1",
    "@angular/core": "^15.1.1",
    "@angular/forms": "^15.1.1",
    "@angular/platform-browser": "^15.1.1",
    "@angular/platform-browser-dynamic": "^15.1.1",
    "@angular/router": "^15.1.1",
    "ngx-mask": "15.2.3",
    "rxjs": "^7.8.0",
    "tslib": "^2.4.1",
    "zone.js": "^0.12.0"
  }

Anything else relevant? As a workaround, the user can select the entire text and the use delete or backspace to clear the input. However, we don't expect that every user knows this. So hopefully this will be fixed in a future release. For other newer version, I did not test this so I can't say if for example the issue also occurs in version 16.x

update: I tried the same config in an Angular 16 and 17 demo app using the respective version of ngx-mask and the same behaviour is also noticeable. So it seem it is not specifically tied to version 15.x of the library.

andriikamaldinov1 commented 6 months ago

@v-skochko Thanks for using Ngx-mask. Please update to latest version. It example all work as expected - https://stackblitz.com/edit/stackblitz-starters-jpdbpd?file=src%2Fmain.ts