fix(datepicker): mark input tocuhed on calendar date selected (#6007)

* fix(datepicker): mark input tocuhed on calendar date selected * add test
angular · Aug 1, 2017 · 21e9768 · 21e9768
1 parent 3c19234
commit 21e9768
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/src/lib/datepicker/datepicker-input.ts b/src/lib/datepicker/datepicker-input.ts
@@ -212,6 +212,7 @@ export class MdDatepickerInput<D> implements AfterContentInit, ControlValueAcces
           this._datepicker.selectedChanged.subscribe((selected: D) => {
             this.value = selected;
             this._cvaOnChange(selected);
+            this._onTouched();
             this.dateInput.emit(new MdDatepickerInputEvent(this, this._elementRef.nativeElement));
             this.dateChange.emit(new MdDatepickerInputEvent(this, this._elementRef.nativeElement));
           });

diff --git a/src/lib/datepicker/datepicker.spec.ts b/src/lib/datepicker/datepicker.spec.ts
@@ -411,6 +411,21 @@ describe('MdDatepicker', () => {
 
         expect(inputEl.classList).toContain('ng-touched');
       });
+
+      it('should mark input touched on calendar selection', () => {
+        let inputEl = fixture.debugElement.query(By.css('input')).nativeElement;
+
+        expect(inputEl.classList).toContain('ng-untouched');
+
+        testComponent.datepicker._selectAndClose(new Date(2017, JAN, 1));
+        fixture.detectChanges();
+
+        fixture.whenStable().then(() => {
+          fixture.detectChanges();
+
+          expect(inputEl.classList).toContain('ng-touched');
+        });
+      });
     });
 
     describe('datepicker with formControl', () => {