fix(1358): add trailing zero when mask="separator.1" and leadZero="tr…

…ue" (#1359) Currently, no trailing zero is added when mask="separator.1" and leadZero="true" and input loses focus. This change adds the trailing zero in that case.
JsDaddy · May 8, 2024 · 144323f · 144323f
1 parent a58224e
commit 144323f
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,9 @@
+# 17.0.8(2024-04-30)
+
+### Fix
+
+-   Fix ([#1358](https://github.com/JsDaddy/ngx-mask/issues/1358))
+
 # 17.0.7(2024-03-28)
 
 ### Fix

diff --git a/projects/ngx-mask-lib/package.json b/projects/ngx-mask-lib/package.json
@@ -1,6 +1,6 @@
 {
     "name": "ngx-mask",
-    "version": "17.0.7",
+    "version": "17.0.8",
     "description": "awesome ngx mask",
     "keywords": [
         "ng2-mask",

diff --git a/projects/ngx-mask-lib/src/lib/ngx-mask.directive.ts b/projects/ngx-mask-lib/src/lib/ngx-mask.directive.ts
@@ -692,7 +692,7 @@ export class NgxMaskDirective implements ControlValueAccessor, OnChanges, Valida
                         maskExpression.length
                     )
                 );
-                if (precision > 1) {
+                if (precision > 0) {
                     el.value = this.suffix ? el.value.split(this.suffix).join('') : el.value;
                     const decimalPart = el.value.split(this.decimalMarker)[1] as string;
                     el.value = el.value.includes(this.decimalMarker)

diff --git a/projects/ngx-mask-lib/src/lib/ngx-mask.service.ts b/projects/ngx-mask-lib/src/lib/ngx-mask.service.ts
@@ -713,7 +713,7 @@ export class NgxMaskService extends NgxMaskApplierService {
         const separatorPrecision = separatorExpression.slice(10, 11);
         if (
             separatorExpression.indexOf('2') > 0 ||
-            (this.leadZero && Number(separatorPrecision) > 1)
+            (this.leadZero && Number(separatorPrecision) > 0)
         ) {
             if (this.decimalMarker === MaskExpression.COMMA && this.leadZero) {
                 // eslint-disable-next-line no-param-reassign

diff --git a/projects/ngx-mask-lib/src/test/emit-events.cy-spec.ts b/projects/ngx-mask-lib/src/test/emit-events.cy-spec.ts
@@ -32,6 +32,30 @@ describe('Directive: Mask (emit-events)', () => {
         cy.get('#pre').should('have.text', '7');
     });
 
+    it('should add trailing zero when mask="separator.1" and leadZero="true"', () => {
+        cy.mount(CypressTestMaskComponent, {
+            componentProperties: {
+                mask: 'separator.1',
+                leadZero: true,
+            },
+            imports: [CypressTestMaskModule],
+        });
+
+        cy.get('#masked').type('9').blur().should('have.value', '9.0');
+    });
+
+    it('should keep trailing decimal when mask="separator.1" and leadZero="true"', () => {
+        cy.mount(CypressTestMaskComponent, {
+            componentProperties: {
+                mask: 'separator.1',
+                leadZero: true,
+            },
+            imports: [CypressTestMaskModule],
+        });
+
+        cy.get('#masked').type('7.7').blur().should('have.value', '7.7');
+    });
+
     it('should emit event only when mask is correct with suffix separator2', () => {
         cy.mount(CypressTestMaskComponent, {
             componentProperties: {

diff --git a/projects/ngx-mask-lib/src/test/separator.spec.ts b/projects/ngx-mask-lib/src/test/separator.spec.ts
@@ -588,6 +588,57 @@ describe('Separator: Mask', () => {
         equal('0@', '0', fixture);
     });
 
+    it('should add trailing zero when separator.1 and leadZero = true', fakeAsync(() => {
+        component.mask = 'separator.1';
+        component.leadZero = true;
+        const debugElement: DebugElement = fixture.debugElement.query(By.css('input'));
+        const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement;
+        spyOnProperty(document, 'activeElement').and.returnValue(inputTarget);
+        fixture.detectChanges();
+
+        component.form.setValue(0);
+        tick();
+        expect(inputTarget.value).toBe('0.0');
+
+        component.form.setValue(1);
+        tick();
+        expect(inputTarget.value).toBe('1.0');
+
+        component.form.setValue(88);
+        tick();
+        expect(inputTarget.value).toBe('88.0');
+
+        component.form.setValue(99.);
+        tick();
+        expect(inputTarget.value).toBe('99.0');
+    }));
+
+    it('should not modify value with one decimal when separator.1 and leadZero = true', fakeAsync(() => {
+        component.mask = 'separator.1';
+        component.leadZero = true;
+        const debugElement: DebugElement = fixture.debugElement.query(By.css('input'));
+        const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement;
+        spyOnProperty(document, 'activeElement').and.returnValue(inputTarget);
+        fixture.detectChanges();
+
+        component.form.setValue(0.0);
+        tick();
+        expect(inputTarget.value).toBe('0.0');
+
+        component.form.setValue(1.0);
+        tick();
+        expect(inputTarget.value).toBe('1.0');
+
+        component.form.setValue(88.0);
+        tick();
+        expect(inputTarget.value).toBe('88.0');
+
+        component.form.setValue(99.9);
+        tick();
+        expect(inputTarget.value).toBe('99.9');
+    }));
+
+
     it('should display zeros at the end separator2', fakeAsync(() => {
         component.mask = 'separator.2';
         component.leadZero = true;