feat(datepicker): close calendar after choose the same date again

src/lib/datepicker/calendar.html

@@ -48,7 +48,9 @@
       [activeDate]="_activeDate"
       [selected]="selected"
       [dateFilter]="_dateFilterForViews"
-      (selectedChange)="_dateSelected($event)">
+      (selectedChange)="_dateSelected($event)"
+      (userSelection)="_userSelected()"
+  >
   </md-month-view>
 
   <md-year-view

src/lib/datepicker/calendar.ts

@@ -80,6 +80,9 @@ export class MdCalendar<D> implements AfterContentInit, OnDestroy {
   /** Emits when the currently selected date changes. */
   @Output() selectedChange = new EventEmitter<D>();
 
+  /** Emits when any date is selected */
+  @Output() userSelection = new EventEmitter();
+
   /** Date filter for the month and year views. */
   _dateFilterForViews = (date: D) => {
     return !!date &&
@@ -159,6 +162,10 @@ export class MdCalendar<D> implements AfterContentInit, OnDestroy {
     }
   }
 
+  _userSelected(): void {
+    this.userSelection.emit();
+  }
+
   /** Handles month selection in the year view. */
   _monthSelected(month: D): void {
     this._activeDate = month;

src/lib/datepicker/datepicker-content.html

@@ -6,5 +6,6 @@
     [maxDate]="datepicker._maxDate"
     [dateFilter]="datepicker._dateFilter"
     [selected]="datepicker._selected"
-    (selectedChange)="datepicker._selectAndClose($event)">
+    (selectedChange)="datepicker._selectAndClose($event)"
+    (userSelection)="datepicker.close()">
 </md-calendar>

src/lib/datepicker/datepicker-input.ts

@@ -224,13 +224,13 @@ export class MdDatepickerInput<D> implements AfterContentInit, ControlValueAcces
   ngAfterContentInit() {
     if (this._datepicker) {
       this._datepickerSubscription =
-          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));
-          });
+        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));
+        });
     }
   }
 

src/lib/datepicker/datepicker.spec.ts

@@ -190,6 +190,26 @@ describe('MdDatepicker', () => {
         });
       });
 
+      it('setting twice to the same selected value should update input and close calendar', () => {
+        for (let changeCount = 1; changeCount < 3; changeCount++) {
+          const currentDay = changeCount;
+          testComponent.datepicker.open();
+          fixture.detectChanges();
+
+          expect(document.querySelector('md-datepicker-content')).not.toBeNull();
+          expect(testComponent.datepickerInput.value).toEqual(new Date(2020, JAN, currentDay));
+
+          let cells = document.querySelectorAll('.mat-calendar-body-cell');
+          dispatchMouseEvent(cells[1], 'click');
+          fixture.detectChanges();
+        }
+
+        fixture.whenStable().then(() => {
+          expect(document.querySelector('md-dialog-container')).toBeNull();
+          expect(testComponent.datepickerInput.value).toEqual(new Date(2020, JAN, 2));
+        });
+      });
+
       it('startAt should fallback to input value', () => {
         expect(testComponent.datepicker.startAt).toEqual(new Date(2020, JAN, 1));
       });

src/lib/datepicker/datepicker.ts

@@ -230,7 +230,6 @@ export class MdDatepicker<D> implements OnDestroy {
     if (!this._dateAdapter.sameDate(oldValue, this._selected)) {
       this.selectedChanged.emit(date);
     }
-    this.close();
   }
 
   /**

src/lib/datepicker/month-view.ts

@@ -67,6 +67,9 @@ export class MdMonthView<D> implements AfterContentInit {
   /** Emits when a new date is selected. */
   @Output() selectedChange = new EventEmitter<D | null>();
 
+  /** Emits when date is picked */
+  @Output() userSelection = new EventEmitter();
+
   /** The label for this month (e.g. "January 2017"). */
   _monthLabel: string;
 
@@ -116,12 +119,15 @@ export class MdMonthView<D> implements AfterContentInit {
 
   /** Handles when a new date is selected. */
   _dateSelected(date: number) {
-    if (this._selectedDate == date) {
-      return;
+    if (this._selectedDate != date) {
+      const selectedYear = this._dateAdapter.getYear(this.activeDate);
+      const selectedMonth = this._dateAdapter.getMonth(this.activeDate);
+      const selectedDate = this._dateAdapter.createDate(selectedYear, selectedMonth, date);
+
+      this.selectedChange.emit(selectedDate);
     }
-    this.selectedChange.emit(this._dateAdapter.createDate(
-        this._dateAdapter.getYear(this.activeDate), this._dateAdapter.getMonth(this.activeDate),
-        date));
+
+    this.userSelection.emit();
   }
 
   /** Initializes this month view. */