From 17bce12eb3c6a26224f8d57eb1d6855f88dfaa42 Mon Sep 17 00:00:00 2001 From: nbuckafs Date: Tue, 30 Apr 2024 17:04:51 -0400 Subject: [PATCH] fix(1358): add trailing zero when mask="separator.1" and leadZero="true" 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. --- CHANGELOG.md | 6 +++ projects/ngx-mask-lib/package.json | 2 +- .../src/lib/ngx-mask.directive.ts | 2 +- .../ngx-mask-lib/src/lib/ngx-mask.service.ts | 2 +- .../src/test/emit-events.cy-spec.ts | 24 +++++++++ .../ngx-mask-lib/src/test/separator.spec.ts | 51 +++++++++++++++++++ 6 files changed, 84 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9eac67bb..87c3b4e7 100644 --- 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 index e1c371dc..465c4a25 100644 --- 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 index e33f239e..edec4d84 100644 --- 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 index dc6331a2..1f4880ce 100644 --- 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 index e9726d28..4844ea43 100644 --- 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 index 807ee99b..b264c0e0 100644 --- 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;