fix(datepicker): don't allow clicks on disabled cells in year and multi-year views (#13448)

Author: crisbeto

src/lib/datepicker/calendar-body.spec.ts

@@ -12,7 +12,6 @@ describe('MatCalendarBody', () => {
 
         // Test components.
         StandardCalendarBody,
-        CalendarBodyWithDisabledCells,
       ],
     });
 
@@ -101,37 +100,6 @@ describe('MatCalendarBody', () => {
     });
   });
 
-  describe('calendar body with disabled cells', () => {
-    let fixture: ComponentFixture<CalendarBodyWithDisabledCells>;
-    let testComponent: CalendarBodyWithDisabledCells;
-    let calendarBodyNativeElement: Element;
-    let cellEls: HTMLElement[];
-
-    beforeEach(() => {
-      fixture = TestBed.createComponent(CalendarBodyWithDisabledCells);
-      fixture.detectChanges();
-
-      const calendarBodyDebugElement = fixture.debugElement.query(By.directive(MatCalendarBody));
-      calendarBodyNativeElement = calendarBodyDebugElement.nativeElement;
-      testComponent = fixture.componentInstance;
-      cellEls = Array.from(calendarBodyNativeElement.querySelectorAll('.mat-calendar-body-cell'));
-    });
-
-    it('should only allow selection of disabled cells when allowDisabledSelection is true', () => {
-      cellEls[0].click();
-      fixture.detectChanges();
-
-      expect(testComponent.selected).toBeFalsy();
-
-      testComponent.allowDisabledSelection = true;
-      fixture.detectChanges();
-
-      cellEls[0].click();
-      fixture.detectChanges();
-
-      expect(testComponent.selected).toBe(1);
-    });
-  });
 });
 
 
@@ -160,25 +128,6 @@ class StandardCalendarBody {
   }
 }
 
-
-@Component({
-  template: `<table mat-calendar-body
-                    [rows]="rows"
-                    [allowDisabledSelection]="allowDisabledSelection"
-                    (selectedValueChange)="selected = $event">
-             </table>`
-})
-class CalendarBodyWithDisabledCells {
-  rows = [[1, 2, 3, 4]].map(r => r.map(d => {
-    let cell = createCell(d);
-    cell.enabled = d % 2 == 0;
-    return cell;
-  }));
-  allowDisabledSelection = false;
-  selected: number;
-}
-
-
 function createCell(value: number) {
   return new MatCalendarCell(value, `${value}`, `${value}-label`, true);
 }

src/lib/datepicker/calendar-body.ts

@@ -67,9 +67,6 @@ export class MatCalendarBody {
   /** The number of columns in the table. */
   @Input() numCols = 7;
 
-  /** Whether to allow selection of disabled cells. */
-  @Input() allowDisabledSelection = false;
-
   /** The cell number of the active cell in the table. */
   @Input() activeCell = 0;
 
@@ -85,10 +82,9 @@ export class MatCalendarBody {
   constructor(private _elementRef: ElementRef<HTMLElement>, private _ngZone: NgZone) { }
 
   _cellClicked(cell: MatCalendarCell): void {
-    if (!this.allowDisabledSelection && !cell.enabled) {
-      return;
+    if (cell.enabled) {
+      this.selectedValueChange.emit(cell.value);
     }
-    this.selectedValueChange.emit(cell.value);
   }
 
   /** The number of blank cells to put at the beginning for the first row. */

src/lib/datepicker/multi-year-view.html

@@ -3,7 +3,6 @@
     <tr><th class="mat-calendar-table-header-divider" colspan="4"></th></tr>
   </thead>
   <tbody mat-calendar-body
-         allowDisabledSelection="true"
          [rows]="_years"
          [todayValue]="_todayYear"
          [selectedValue]="_selectedYear"

src/lib/datepicker/year-view.html

@@ -3,7 +3,6 @@
     <tr><th class="mat-calendar-table-header-divider" colspan="4"></th></tr>
   </thead>
   <tbody mat-calendar-body
-         allowDisabledSelection="true"
          [label]="_yearLabel"
          [rows]="_months"
          [todayValue]="_todayMonth"