fix(ref:1560): fix issue

fix(ref:1560): fix issue

Author: andriikamaldinov1

CHANGELOG.md

@@ -1,3 +1,10 @@
+# 21.0.1(2026-01-29)
+
+### fix
+
+- Fix ([#1585](https://github.com/JsDaddy/ngx-mask/issues/1585))
+- Fix ([#1560](https://github.com/JsDaddy/ngx-mask/issues/1560))
+
 # 21.0.0(2026-01-28)
 
 ### fix

bun.lock

@@ -1,6 +1,6 @@
 {
     "name": "ngx-mask",
-    "version": "21.0.0",
+    "version": "21.0.1",
     "description": "Awesome ngx mask",
     "license": "MIT",
     "engines": {
@@ -60,25 +60,15 @@
         "url": "https://github.com/JsDaddy/ngx-mask.git"
     },
     "dependencies": {
-        "@angular/animations": "21.1.1",
-        "@angular/common": "21.1.1",
-        "@angular/compiler": "21.1.1",
-        "@angular/core": "21.1.1",
-        "@angular/forms": "21.1.1",
-        "@angular/platform-browser": "21.1.1",
-        "@angular/platform-browser-dynamic": "21.1.1",
-        "@angular/router": "21.1.1",
-        "@types/jest": "30.0.0",
-        "@types/mocha": "10.0.10",
-        "cypress": "15.9.0",
+        "@angular/animations": "21.1.2",
+        "@angular/common": "21.1.2",
+        "@angular/compiler": "21.1.2",
+        "@angular/core": "21.1.2",
+        "@angular/forms": "21.1.2",
+        "@angular/platform-browser": "21.1.2",
+        "@angular/router": "21.1.2",
         "highlight.js": "11.11.1",
-        "ngx-highlightjs": "14.0.1",
-        "ngxtension": "7.0.2",
-        "rxjs": "7.8.2",
-        "semantic-release": "25.0.2",
-        "semantic-release-export-data": "1.2.0",
-        "snyk": "1.1302.1",
-        "@tailwindcss/postcss": "4.1.18"
+        "ngx-highlightjs": "14.0.1"
     },
     "devDependencies": {
         "@angular-devkit/build-angular": "21.1.2",
@@ -88,33 +78,38 @@
         "@angular-eslint/schematics": "21.1.0",
         "@angular-eslint/template-parser": "21.1.0",
         "@angular/cli": "21.1.2",
-        "@angular/compiler-cli": "21.1.1",
-        "@angular/language-service": "21.1.1",
+        "@angular/compiler-cli": "21.1.2",
+        "@angular/language-service": "21.1.2",
+        "@angular/platform-browser-dynamic": "21.1.2",
         "@commitlint/cli": "20.3.1",
         "@commitlint/config-conventional": "20.3.1",
-        "@jscutlery/cypress-angular": "0.9.22",
+        "@tailwindcss/postcss": "4.1.18",
         "@types/highlight.js": "10.1.0",
-        "@types/node": "25.0.10",
+        "@types/jest": "30.0.0",
+        "@types/node": "25.1.0",
         "@typescript-eslint/eslint-plugin": "8.54.0",
         "@typescript-eslint/parser": "8.54.0",
-        "@vitest/browser-playwright": "^4.0.18",
+        "@vitest/browser-playwright": "4.0.18",
         "@web/test-runner": "0.20.2",
         "angular-cli-ghpages": "3.0.2",
         "angular-eslint": "21.1.0",
         "angular-http-server": "1.12.0",
         "bun-types": "1.3.7",
+        "cypress": "15.9.0",
         "eslint": "9.39.2",
         "eslint-config-prettier": "10.1.8",
         "eslint-plugin-json": "4.0.1",
         "eslint-plugin-prettier": "5.5.5",
-        "jsdom": "^27.4.0",
+        "jsdom": "27.4.0",
         "lint-staged": "16.2.7",
         "markdownlint-cli": "0.47.0",
         "ng-packagr": "21.1.0",
         "npm-check-updates": "19.3.2",
         "postcss": "8.5.6",
         "prettier": "3.8.1",
-        "puppeteer": "24.36.1",
+        "semantic-release": "25.0.2",
+        "semantic-release-export-data": "1.2.0",
+        "snyk": "1.1302.1",
         "stylelint": "17.0.0",
         "stylelint-config-prettier": "9.0.5",
         "stylelint-config-recommended-scss": "17.0.0",
@@ -123,7 +118,7 @@
         "type-coverage": "2.29.7",
         "typescript": "5.9.3",
         "typescript-eslint": "8.54.0",
-        "vitest": "^4.0.18"
+        "vitest": "4.0.18"
     },
     "typeCoverage": {
         "atLeast": 91,

package.json

@@ -1,6 +1,6 @@
 {
     "name": "ngx-mask",
-    "version": "21.0.0",
+    "version": "21.0.1",
     "description": "awesome ngx mask",
     "keywords": [
         "ng2-mask",
@@ -28,9 +28,9 @@
         "url": "https://github.com/JsDaddy/ngx-mask/issues"
     },
     "peerDependencies": {
-        "@angular/common": ">=14.0.0",
-        "@angular/core": ">=14.0.0",
-        "@angular/forms": ">=14.0.0"
+        "@angular/common": "^21.0.0",
+        "@angular/core": "^21.0.0",
+        "@angular/forms": "^21.0.0"
     },
     "dependencies": {}
 }

projects/ngx-mask-lib/package.json

@@ -702,6 +702,12 @@ export class NgxMaskApplierService {
                     this.patterns[maskExpression[cursor] ?? MaskExpression.EMPTY_STRING] &&
                     this.patterns[maskExpression[cursor] ?? MaskExpression.EMPTY_STRING]?.optional
                 ) {
+                    // If the input symbol is whitespace or doesn't match the pattern,
+                    // skip it without consuming the mask position
+                    if (inputSymbol.trim() === MaskExpression.EMPTY_STRING) {
+                        // Skip whitespace input, don't advance mask cursor
+                        continue;
+                    }
                     if (
                         !!inputArray[cursor] &&
                         maskExpression !== '099.099.099.099' &&

projects/ngx-mask-lib/src/lib/ngx-mask-applier.service.ts

@@ -1046,11 +1046,20 @@ export class NgxMaskDirective
                         .replace(MaskExpression.DOT, MaskExpression.COMMA);
                 }
                 if (this.mask()?.startsWith(MaskExpression.SEPARATOR) && this.leadZero()) {
+                    const isFirstWrite = !this._maskService.isInitialized;
                     requestAnimationFrame(() => {
+                        // On initial load, temporarily set isInitialized to false
+                        // so formControlResult returns early and doesn't mark form as dirty
+                        if (isFirstWrite) {
+                            this._maskService.isInitialized = false;
+                        }
                         this._maskService.applyMask(
                             inputValue?.toString() ?? '',
                             this._maskService.maskExpression
                         );
+                        if (isFirstWrite) {
+                            this._maskService.isInitialized = true;
+                        }
                     });
                 }
                 this._maskService.isNumberValue = true;