From 21c92124751cf7060f498c1a59fda4c8d4386b17 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Sat, 20 Jan 2018 11:03:53 +0100
Subject: [PATCH] fix(datepicker): calendar keyboard controls not working if
 the user clicks on blank area

Fixes the user not being able to use the keyboard controls on a calendar, if they click on one of the blank areas next to a cell. The issue comes from the calendar body not being focusable which ends up returning focus back to the body.
---
 src/lib/datepicker/calendar.html    | 2 +-
 src/lib/datepicker/calendar.spec.ts | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/lib/datepicker/calendar.html b/src/lib/datepicker/calendar.html
index 924d07c4f80f..594fc00e1d5d 100644
--- a/src/lib/datepicker/calendar.html
+++ b/src/lib/datepicker/calendar.html
@@ -21,7 +21,7 @@
 </div>
 
 <div class="mat-calendar-content" (keydown)="_handleCalendarBodyKeydown($event)"
-    [ngSwitch]="_currentView" cdkMonitorSubtreeFocus>
+    [ngSwitch]="_currentView" cdkMonitorSubtreeFocus tabindex="-1">
   <mat-month-view
       *ngSwitchCase="'month'"
       [activeDate]="_activeDate"
diff --git a/src/lib/datepicker/calendar.spec.ts b/src/lib/datepicker/calendar.spec.ts
index e65883d496d6..5e8237b1005e 100644
--- a/src/lib/datepicker/calendar.spec.ts
+++ b/src/lib/datepicker/calendar.spec.ts
@@ -220,6 +220,10 @@ describe('MatCalendar', () => {
           expect(calendarInstance._activeDate).toEqual(new Date(2017, JAN, 31));
         });
 
+        it('should make the calendar body focusable', () => {
+          expect(calendarBodyEl.getAttribute('tabindex')).toBe('-1');
+        });
+
         describe('month view', () => {
           it('should decrement date on left arrow press', () => {
             dispatchKeyboardEvent(calendarBodyEl, 'keydown', LEFT_ARROW);