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

This commit is contained in:
Kristiyan Kostadinov
2018-10-19 17:05:48 +02:00
committed by Joey Perrott
parent a7df1d0a3b
commit c15bad2f36
4 changed files with 2 additions and 59 deletions
-51
View File
@@ -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);
}
+2 -6
View File
@@ -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. */
-1
View File
@@ -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"
-1
View File
@@ -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"