From 0b8955b792e8821d5e667ea6a9eb78469276578d Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Tue, 23 Jan 2018 16:27:44 +0100
Subject: [PATCH] fix(datepicker): calendar keyboard controls not working if
 the user clicks on blank area (#9494)

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 924d07c4f80..594fc00e1d5 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 e65883d496d..5e8237b1005 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);