fix(datepicker): close datepicker popup on alt + up arrow

Similarly to other controls that are based around an input and a popup, the datepicker should open on alt + down arrow and close on alt + up arrow. The opening logic was already being handled and this PR adds the logic for closing.

Author: crisbeto

src/lib/datepicker/datepicker.spec.ts

@@ -1,6 +1,12 @@
-import {ENTER, ESCAPE, RIGHT_ARROW} from '@angular/cdk/keycodes';
+import {ENTER, ESCAPE, RIGHT_ARROW, UP_ARROW} from '@angular/cdk/keycodes';
 import {Overlay, OverlayContainer, ScrollDispatcher} from '@angular/cdk/overlay';
-import {dispatchFakeEvent, dispatchKeyboardEvent, dispatchMouseEvent} from '@angular/cdk/testing';
+import {
+  dispatchFakeEvent,
+  dispatchKeyboardEvent,
+  dispatchMouseEvent,
+  createKeyboardEvent,
+  dispatchEvent,
+} from '@angular/cdk/testing';
 import {Component, ViewChild} from '@angular/core';
 import {ComponentFixture, fakeAsync, flush, inject, TestBed} from '@angular/core/testing';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
@@ -386,6 +392,25 @@ describe('MatDatepicker', () => {
           expect(testComponent.datepicker.opened).toBe(false);
         }))
       );
+
+      it('should close the datpeicker using ALT + UP_ARROW', fakeAsync(() => {
+        testComponent.datepicker.open();
+        fixture.detectChanges();
+        flush();
+
+        expect(testComponent.datepicker.opened).toBe(true);
+
+        const content = document.querySelector('.mat-datepicker-content')!;
+        const event = createKeyboardEvent('keydown', UP_ARROW);
+        Object.defineProperty(event, 'altKey', {get: () => true});
+
+        dispatchEvent(content, event);
+        fixture.detectChanges();
+        flush();
+
+        expect(testComponent.datepicker.opened).toBe(false);
+      }));
+
     });
 
     describe('datepicker with too many inputs', () => {

src/lib/datepicker/datepicker.ts

@@ -8,7 +8,7 @@
 
 import {Directionality} from '@angular/cdk/bidi';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
-import {ESCAPE} from '@angular/cdk/keycodes';
+import {ESCAPE, UP_ARROW} from '@angular/cdk/keycodes';
 import {
   FlexibleConnectedPositionStrategy,
   Overlay,
@@ -83,6 +83,7 @@ export const _MatDatepickerContentMixinBase = mixinColor(MatDatepickerContentBas
   styleUrls: ['datepicker-content.css'],
   host: {
     'class': 'mat-datepicker-content',
+    '(keydown)': '_handleKeydown($event)',
     '[@transformPanel]': '"enter"',
     '[class.mat-datepicker-content-touch]': 'datepicker.touchUi',
     '[class.mat-datepicker-content-above]': '_isAbove',
@@ -138,6 +139,13 @@ export class MatDatepickerContent<D> extends _MatDatepickerContentMixinBase
     });
   }
 
+  _handleKeydown(event: KeyboardEvent) {
+    // Closing on alt + up is only valid when there's an input associated with the datepicker.
+    if (this.datepicker._datepickerInput && event.altKey && event.keyCode === UP_ARROW) {
+      this.datepicker.close();
+    }
+  }
+
   ngAfterContentInit() {
     this._focusActiveCell();
   }