Merge pull request #921 from mobi/918-Enhance_go-date-picker_by_enabl…

…ing_calendar_to_open_when_date_field_is_clicked_anywhere_within_it

[Feature] #918 enhancement of go-date-picker

projects/go-lib/src/lib/components/go-datepicker/go-datepicker.component.html

@@ -17,6 +17,8 @@
     [(ngModel)]="selectedDate"
     (blur)="validateDate()"
     [disabled]="control.disabled"
+    (input)="onInputCloseCalendar()"
+    (click)="toggleDatepicker($event)"
   />
   <go-icon-button
     class="go-datepicker__toggle"

projects/go-lib/src/lib/components/go-datepicker/go-datepicker.component.spec.ts

@@ -14,6 +14,7 @@ import { GoFormErrorsModule } from '../go-form-errors/go-form-errors.module';
 describe('GoDatepickerComponent', () => {
   let component: GoDatepickerComponent;
   let fixture: ComponentFixture<GoDatepickerComponent>;
+  let inputElement: HTMLInputElement;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
@@ -41,6 +42,7 @@ describe('GoDatepickerComponent', () => {
     fixture = TestBed.createComponent(GoDatepickerComponent);
     component = fixture.componentInstance;
     component.control = new FormControl('');
+    inputElement = fixture.nativeElement.querySelector("input");
   });
 
   it('should create', () => {
@@ -235,4 +237,33 @@ describe('GoDatepickerComponent', () => {
       expect(component.goCalendar.isOpen).toBe(false);
     });
   });
+
+  describe("onInputCloseCalendar", () => {
+    it('close the calendar when the user interacts with the date field by typing inside it. ', () => {
+      component.goCalendar.openCalendar(new Date());
+
+      component.onInputCloseCalendar();
+
+      expect(component.goCalendar.isOpen).toBe(false);
+    });
+  });
+
+  describe("onInputCloseCalendar", () => {
+    it("close the calendar when the user interacts with the date field by typing inside it. ", () => {
+      component.goCalendar.openCalendar(new Date());
+
+      component.onInputCloseCalendar();
+
+      expect(component.goCalendar.isOpen).toBe(false);
+    });
+
+    it("should call onInputCloseCalendar() when input event is emitted.", () => {
+      const onInputCloseCalendarSpy = spyOn(component, "onInputCloseCalendar");
+
+      inputElement.dispatchEvent(new Event("input"));
+
+      expect(onInputCloseCalendarSpy).toHaveBeenCalled();
+    });
+  });
+
 });

projects/go-lib/src/lib/components/go-datepicker/go-datepicker.component.ts

@@ -118,4 +118,10 @@ export class GoDatepickerComponent extends GoFormBaseComponent implements OnDest
   private initializePlaceholder(): void {
     this.placeholder = this.placeholder || LocaleFormat.format(this.locale);
   }
+
+  public onInputCloseCalendar(): void {
+    if (this.goCalendar.isOpen) {
+      this.goCalendar.closeCalendar();
+    }
+  }
 }