From 80edd2e780916820020bb47a3b686cc94b1b3a5b Mon Sep 17 00:00:00 2001 From: crisbeto Date: Fri, 5 Oct 2018 21:11:49 +0300 Subject: [PATCH] fix(datepicker): don't allow clicks on disabled cells in year and multi-year views Doesn't allow users to click on disabled cells inside the calendar in the year and multi-year views. Fixes #13446. --- src/lib/datepicker/calendar-body.spec.ts | 51 ------------------------ src/lib/datepicker/calendar-body.ts | 8 +--- src/lib/datepicker/multi-year-view.html | 1 - src/lib/datepicker/year-view.html | 1 - 4 files changed, 2 insertions(+), 59 deletions(-) diff --git a/src/lib/datepicker/calendar-body.spec.ts b/src/lib/datepicker/calendar-body.spec.ts index 30ea688a3787..8d584d8358e8 100644 --- a/src/lib/datepicker/calendar-body.spec.ts +++ b/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; - 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: ` -
` -}) -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); } diff --git a/src/lib/datepicker/calendar-body.ts b/src/lib/datepicker/calendar-body.ts index b1bc8c5fecd1..b8d4df62014e 100644 --- a/src/lib/datepicker/calendar-body.ts +++ b/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, 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. */ diff --git a/src/lib/datepicker/multi-year-view.html b/src/lib/datepicker/multi-year-view.html index ab28ea291b33..3e6c252d0e15 100644 --- a/src/lib/datepicker/multi-year-view.html +++ b/src/lib/datepicker/multi-year-view.html @@ -3,7 +3,6 @@