fix(date-range): fix invalid date range when changing text

GetTerminus · Aug 23, 2019 · ac0156e · ac0156e
1 parent d54709d
commit ac0156e
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 9 deletions.
diff --git 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
     >
   </ng-container>
@@ -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
     ></textarea>
   </ng-container>

diff --git 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
@@ -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},
     };