diff --git a/terminus-ui/input/src/input.component.html b/terminus-ui/input/src/input.component.html index 9311a597e..296da6e93 100644 --- a/terminus-ui/input/src/input.component.html +++ b/terminus-ui/input/src/input.component.html @@ -104,7 +104,7 @@ [(ngModel)]="value" (blur)="focusChanged(false)" (focus)="focusChanged(true)" - (input)="onInput($event.target.value)" + (input)="onInput($event.target)" #inputElement > @@ -128,7 +128,7 @@ [(ngModel)]="value" (blur)="focusChanged(false)" (focus)="focusChanged(true)" - (input)="onInput($event.target.value)" + (input)="onInput($event.target)" [matDatepickerFilter]="dateFilter" [matDatepicker]="picker" [min]="minDate" @@ -157,7 +157,7 @@ [(ngModel)]="value" (blur)="focusChanged(false)" (focus)="focusChanged(true)" - (input)="onInput($event.target.value)" + (input)="onInput($event.target)" #inputElement > diff --git a/terminus-ui/input/src/input.component.spec.ts b/terminus-ui/input/src/input.component.spec.ts index 8fc2e0f6e..6ca39fc3d 100644 --- a/terminus-ui/input/src/input.component.spec.ts +++ b/terminus-ui/input/src/input.component.spec.ts @@ -2,13 +2,11 @@ import { AutofillMonitor } from '@angular/cdk/text-field'; import { ElementRef, - Provider, Type, } from '@angular/core'; import { ComponentFixture, fakeAsync, - TestBed, tick, } from '@angular/core/testing'; import { @@ -901,6 +899,17 @@ describe(`TsInputComponent`, function() { expect(component.selected.emit).toHaveBeenCalledWith(new Date('01-01-2018')); }); + test('should return if target is not set', () => { + const fixture = createComponent(TestComponents.DateFilter); + const component = fixture.componentInstance.inputComponent; + component._valueChange.emit = jest.fn(); + component.selected.emit = jest.fn(); + component.onInput(null as any); + + expect(component._valueChange.emit).not.toHaveBeenCalled(); + expect(component.selected.emit).not.toHaveBeenCalled(); + }); + describe(`updateInnerValue`, () => { test(`should not call detectChange if component is destroyed when no toggling input`, () => { const fixture = createComponent(TestComponents.SimpleFormControl); @@ -924,6 +933,7 @@ describe(`TsInputComponent`, function() { fixture.destroy(); expect(comp['changeDetectorRef'].detectChanges).not.toHaveBeenCalled(); }); + }); }); diff --git a/terminus-ui/input/src/input.component.ts b/terminus-ui/input/src/input.component.ts index 6d3e96e11..dc088c334 100644 --- a/terminus-ui/input/src/input.component.ts +++ b/terminus-ui/input/src/input.component.ts @@ -1155,10 +1155,15 @@ export class TsInputComponent implements * * NOTE: KNOWN BUG that allows model and UI to get out of sync when extra characters are added after a fully satisfied mask. * - * @param value - The typed value + * @param target - The event target for the input event. */ // tslint:disable: no-unused-variable - public onInput(value: string): void { + public onInput(target: HTMLInputElement | HTMLTextAreaElement): void { + if (!target) { + return; + } + + let value = target.value; // We need to trim the last character due to a bug in the text-mask library const trimmedValue = this.trimLastCharacter(value); this.inputElement.nativeElement.value = trimmedValue; @@ -1168,13 +1173,16 @@ export class TsInputComponent implements // Update the mask. this.textMaskInputElement.update(trimmedValue); + // Reset the value after the mask has had a chance to update it. + value = target.value; + // Verify the value has changed // istanbul ignore else if (this.lastValue !== value) { this.lastValue = value; // Trigger the change (and remove mask if needed) - this.setValue(trimmedValue); + this.setValue(value); } } @@ -1243,7 +1251,7 @@ export class TsInputComponent implements date: { mask: [/\d/, /\d/, '-', /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/], pipe: createAutoCorrectedDatePipe(this.defaultDateFormat), - keepCharPositions: true, + keepCharPositions: false, }, default: {mask: false}, };