fix: don't call onchange from writeValue

ngx-cva-test-suite added

Author: lnu

bun.lock

@@ -1,5 +1,6 @@
 {
   "lockfileVersion": 1,
+  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "ngx-mask",
@@ -56,6 +57,7 @@
         "lint-staged": "16.1.2",
         "markdownlint-cli": "0.45.0",
         "ng-packagr": "20.1.0",
+        "ngx-cva-test-suite": "^2.0.1",
         "npm-check-updates": "18.0.1",
         "postcss": "8.5.6",
         "postcss-nesting": "13.0.2",
@@ -2432,6 +2434,8 @@
 
     "ng-packagr": ["[email protected]", "", { "dependencies": { "@ampproject/remapping": "^2.3.0", "@rollup/plugin-json": "^6.1.0", "@rollup/wasm-node": "^4.24.0", "ajv": "^8.17.1", "ansi-colors": "^4.1.3", "browserslist": "^4.22.1", "chokidar": "^4.0.1", "commander": "^14.0.0", "dependency-graph": "^1.0.0", "esbuild": "^0.25.0", "find-cache-directory": "^6.0.0", "injection-js": "^2.4.0", "jsonc-parser": "^3.3.1", "less": "^4.2.0", "ora": "^8.2.0", "piscina": "^5.0.0", "postcss": "^8.4.47", "rollup-plugin-dts": "^6.2.0", "rxjs": "^7.8.1", "sass": "^1.81.0", "tinyglobby": "^0.2.12" }, "optionalDependencies": { "rollup": "^4.24.0" }, "peerDependencies": { "@angular/compiler-cli": "^20.0.0 || ^20.1.0-next.0 || ^20.2.0-next.0", "tailwindcss": "^2.0.0 || ^3.0.0 || ^4.0.0", "tslib": "^2.3.0", "typescript": ">=5.8 <5.9" }, "optionalPeers": ["tailwindcss"], "bin": { "ng-packagr": "src/cli/main.js" } }, "sha512-objHk39HWnSSv54KD0Ct4A02rug6HiqbmXo1KJW39npzuVc37QWfiZy94afltH1zIx+mQqollmGaCmwibmagvQ=="],
 
+    "ngx-cva-test-suite": ["[email protected]", "", { "dependencies": { "tslib": "^2.3.0" }, "peerDependencies": { "@angular/core": ">=12.0.0", "@angular/forms": ">=12.0.0", "@angular/platform-browser": ">=12.0.0" } }, "sha512-Q6JrUVFXq1J4AdxOoD6KMO4vTZei+l8GYQdlWbT2vExUNu7KW6bulqXsl+OBNHiQ6tj3BKS/+K42HEOuaSfNWg=="],
+
     "ngx-highlightjs": ["[email protected]", "", { "dependencies": { "highlight.js": "^11.11.1", "tslib": "^2.3.0" }, "peerDependencies": { "@angular/cdk": ">=19.0.0", "@angular/common": ">=19.0.0", "@angular/core": ">=19.0.0", "rxjs": ">=7.0.0" } }, "sha512-pa4YPChIho+Qs6P036oMvTt8pmTlMwberz/kGBojKVMEHSj9t4PT1YzBplM+RMK0VWgLK4zRbJbxivQrLPr1fQ=="],
 
     "ngxtension": ["[email protected]", "", { "dependencies": { "tslib": "^2.3.0" }, "peerDependencies": { "@angular/common": ">=16.0.0", "@angular/core": ">=16.0.0", "@use-gesture/vanilla": "^10.0.0", "rxjs": "^6.0.0 || ^7.0.0" }, "optionalPeers": ["@use-gesture/vanilla"] }, "sha512-ZYs5Fkgrcu+aa/GBqIf/2N7SUZoYam+Fjmu7WxP9rIm4Mx0SECzq+glpWDwBYyPtyfCBwuo6Z8dSPyyzR7PTFQ=="],

package.json

@@ -99,7 +99,10 @@
         "@typescript-eslint/parser": "8.38.0",
         "@web/test-runner": "0.20.2",
         "angular-cli-ghpages": "2.0.3",
+        "angular-eslint": "20.1.1",
         "angular-http-server": "1.12.0",
+        "bun-types": "1.2.19",
+        "cssnano": "7.1.0",
         "eslint": "9.31.0",
         "eslint-config-prettier": "10.1.8",
         "eslint-plugin-json": "4.0.1",
@@ -109,23 +112,21 @@
         "lint-staged": "16.1.2",
         "markdownlint-cli": "0.45.0",
         "ng-packagr": "20.1.0",
+        "ngx-cva-test-suite": "^2.0.1",
         "npm-check-updates": "18.0.1",
+        "postcss": "8.5.6",
+        "postcss-nesting": "13.0.2",
+        "postcss-scss": "4.0.9",
         "prettier": "3.6.2",
         "puppeteer": "24.14.0",
         "stylelint": "16.22.0",
         "stylelint-config-prettier": "9.0.5",
         "stylelint-config-recommended-scss": "15.0.1",
         "stylelint-prettier": "5.0.3",
+        "tailwindcss": "3.4.16",
         "type-coverage": "2.29.7",
         "typescript": "5.8.3",
-        "angular-eslint": "20.1.1",
-        "typescript-eslint": "8.38.0",
-        "tailwindcss": "3.4.16",
-        "bun-types": "1.2.19",
-        "postcss": "8.5.6",
-        "postcss-nesting": "13.0.2",
-        "cssnano": "7.1.0",
-        "postcss-scss": "4.0.9"
+        "typescript-eslint": "8.38.0"
     },
     "typeCoverage": {
         "atLeast": 91,

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

@@ -595,6 +595,11 @@ export class NgxMaskService extends NgxMaskApplierService {
             ? this.outputTransformFn
             : (v: unknown) => v;
 
+        // don't fire onchange from writevalue
+        if (this.writingValue && this.maskChanged == false) {
+            return;
+        }
+
         this.writingValue = false;
         this.maskChanged = false;
 

projects/ngx-mask-lib/src/test/cva.spec.ts

@@ -0,0 +1,43 @@
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { runValueAccessorTests } from 'ngx-cva-test-suite';
+import type { ElementRef} from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
+import { NgxMaskDirective, provideNgxMask } from 'ngx-mask';
+
+@Component({
+  template: `<input
+    mask="Hh:m0"
+    [dropSpecialCharacters]="false"
+    [showMaskTyped]="true"
+    [leadZeroDateTime]="true"
+    #ctrl />`,
+  imports: [NgxMaskDirective],
+})
+export class CVAWrapperComponent {
+  @ViewChild(NgxMaskDirective) public defaultCtrl!: NgxMaskDirective;
+  @ViewChild('ctrl') public readonly ctrl!: ElementRef<HTMLInputElement>;
+
+  public get value(): string {
+    return this.ctrl?.nativeElement.value;
+  }
+}
+
+describe('TimeFieldFormComponent', () => {
+  runValueAccessorTests<NgxMaskDirective, CVAWrapperComponent>({
+    component: NgxMaskDirective,
+    testModuleMetadata: {
+      providers: [provideNgxMask()],
+      imports: [FormsModule, ReactiveFormsModule],
+    },
+    hostTemplate: {
+      hostComponent: CVAWrapperComponent,
+      getTestingComponent: fixture => fixture.componentInstance.defaultCtrl,
+    },
+    supportsOnBlur: true,
+    nativeControlSelector: 'input[mask]',
+    internalValueChangeSetter: null,
+    getComponentValue: null,
+    resetCustomValue: { value: '__:__' },
+    getValues: () => ['10:00', '20:00', null],
+  });
+});

projects/ngx-mask-lib/src/test/type-number.spec.ts

@@ -11,7 +11,7 @@ import { equal } from './utils/test-functions.component';
     imports: [ReactiveFormsModule, NgxMaskDirective],
     template: ` <input id="maska" type="number" [mask]="mask()" [formControl]="form" /> `,
 })
-// eslint-disable-next-line @angular-eslint/component-class-suffix
+ 
 export class TestTypeNumber {
     public form: FormControl = new FormControl('');
     public mask = signal<string>('');