fix(datepicker): user selection event not emitting value when clicking on the selected date (#19211)

If the user clicks on the selected date, we were emitting null instead of the actual value.

Author: crisbeto

src/material/datepicker/month-view.spec.ts

@@ -384,6 +384,22 @@ describe('MatMonthView', () => {
             expect(fixture.componentInstance.selectedChangeSpy).toHaveBeenCalledWith(selectedDate);
           });
 
+        it('should fire the _userSelection event with the correct value when clicking ' +
+          'on a selected date', () => {
+            const date = new Date(2017, JAN, 10);
+            testComponent.selected = date;
+            fixture.detectChanges();
+
+            expect(fixture.componentInstance.userSelectionSpy).not.toHaveBeenCalled();
+
+            const selectedCell =
+                monthViewNativeElement.querySelector('.mat-calendar-body-selected') as HTMLElement;
+            selectedCell.click();
+            fixture.detectChanges();
+
+            expect(fixture.componentInstance.userSelectionSpy).toHaveBeenCalledWith(
+              jasmine.objectContaining({value: date}));
+          });
       });
     });
   });
@@ -449,12 +465,14 @@ describe('MatMonthView', () => {
     <mat-month-view
       [(activeDate)]="date"
       [(selected)]="selected"
-      (selectedChange)="selectedChangeSpy($event)"></mat-month-view>`,
+      (selectedChange)="selectedChangeSpy($event)"
+      (_userSelection)="userSelectionSpy($event)"></mat-month-view>`,
 })
 class StandardMonthView {
   date = new Date(2017, JAN, 5);
   selected: Date | DateRange<Date> = new Date(2017, JAN, 10);
   selectedChangeSpy = jasmine.createSpy('selectedChange');
+  userSelectionSpy = jasmine.createSpy('userSelection');
 }
 
 

src/material/datepicker/month-view.ts

@@ -204,7 +204,9 @@ export class MatMonthView<D> implements AfterContentInit, OnDestroy {
   /** Handles when a new date is selected. */
   _dateSelected(event: MatCalendarUserEvent<number>) {
     const date = event.value;
-    let selectedDate: D | null = null;
+    const selectedYear = this._dateAdapter.getYear(this.activeDate);
+    const selectedMonth = this._dateAdapter.getMonth(this.activeDate);
+    const selectedDate = this._dateAdapter.createDate(selectedYear, selectedMonth, date);
     let rangeStartDate: number | null;
     let rangeEndDate: number | null;
 
@@ -216,9 +218,6 @@ export class MatMonthView<D> implements AfterContentInit, OnDestroy {
     }
 
     if (rangeStartDate !== date || rangeEndDate !== date) {
-      const selectedYear = this._dateAdapter.getYear(this.activeDate);
-      const selectedMonth = this._dateAdapter.getMonth(this.activeDate);
-      selectedDate = this._dateAdapter.createDate(selectedYear, selectedMonth, date);
       this.selectedChange.emit(selectedDate);
     }