fix(datepicker): emit 'selectEvent' when datepicker model changes

Fixes #2278 Closes #2281
ng-bootstrap · Apr 6, 2018 · 4a0ec89 · 4a0ec89
1 parent af46a69
commit 4a0ec89
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 11 deletions.
diff --git a/src/datepicker/datepicker-input.spec.ts b/src/datepicker/datepicker-input.spec.ts
@@ -609,23 +609,37 @@ describe('NgbInputDatepicker', () => {
           .toHaveBeenCalledWith({current: {year: 2016, month: 9}, next: {year: 2018, month: 4}});
     });
 
-    it(`should relay the 'dateSelect' event`, () => {
+    it('should emit both "dateSelect" and "onModelChange" events', () => {
       const fixture = createTestCmpt(`
-          <input ngbDatepicker #d="ngbDatepicker" (dateSelect)="onDateSelect($event)">
-          <button (click)="open(d)">Open</button>`);
+          <input ngbDatepicker ngModel [startDate]="{year: 2018, month: 3}" 
+          (ngModelChange)="onModelChange($event)" (dateSelect)="onDateSelect($event)">`);
 
       const dpInput = fixture.debugElement.query(By.directive(NgbInputDatepicker)).injector.get(NgbInputDatepicker);
       spyOn(fixture.componentInstance, 'onDateSelect');
+      spyOn(fixture.componentInstance, 'onModelChange');
 
       // open
       dpInput.open();
       fixture.detectChanges();
 
-      // select
-      const dp = fixture.debugElement.query(By.css('ngb-datepicker')).injector.get(NgbDatepicker);
-      dp.select.emit({year: 2018, month: 4, day: 5});
+      // click on a date
+      fixture.nativeElement.querySelectorAll('.ngb-dp-day')[3].click();  // 1 MAR 2018
+      fixture.detectChanges();
+      expect(fixture.componentInstance.onDateSelect).toHaveBeenCalledTimes(1);
+      expect(fixture.componentInstance.onModelChange).toHaveBeenCalledTimes(1);
+
+      // open again
+      dpInput.open();
+      fixture.detectChanges();
+
+      // click the same date
+      fixture.nativeElement.querySelectorAll('.ngb-dp-day')[3].click();  // 1 MAR 2018
       fixture.detectChanges();
-      expect(fixture.componentInstance.onDateSelect).toHaveBeenCalledWith({year: 2018, month: 4, day: 5});
+      expect(fixture.componentInstance.onDateSelect).toHaveBeenCalledTimes(2);
+      expect(fixture.componentInstance.onModelChange).toHaveBeenCalledTimes(1);
+
+      expect(fixture.componentInstance.onDateSelect).toHaveBeenCalledWith({year: 2018, month: 3, day: 1});
+      expect(fixture.componentInstance.onModelChange).toHaveBeenCalledWith({year: 2018, month: 3, day: 1});
     });
   });
 
@@ -731,6 +745,8 @@ class TestComponent {
 
   onDateSelect() {}
 
+  onModelChange() {}
+
   open(d: NgbInputDatepicker) { d.open(); }
 
   close(d: NgbInputDatepicker) { d.close(); }

diff --git a/src/datepicker/datepicker-input.ts b/src/datepicker/datepicker-input.ts
@@ -150,7 +150,7 @@ export class NgbInputDatepicker implements OnChanges,
    * An event fired when user selects a date using keyboard or mouse.
    * The payload of the event is currently selected NgbDateStruct.
    *
-   * @since 1.1.0
+   * @since 1.1.1
    */
   @Output() dateSelect = new EventEmitter<NgbDateStruct>();
 
@@ -253,9 +253,6 @@ export class NgbInputDatepicker implements OnChanges,
       this._cRef.instance.registerOnChange((selectedDate) => {
         this.writeValue(selectedDate);
         this._onChange(selectedDate);
-        if (this.autoClose) {
-          this.close();
-        }
       });
 
       // focus handling