fix(material/datepicker): don't handle escape key presses with modifier (#20713)

Aligns the datepicker's escape key handling with the rest of the components where
they aren't being handled if the user is pressing a modifier key.

Author: crisbeto

src/material/datepicker/datepicker-base.ts

@@ -8,7 +8,7 @@
 
 import {Directionality} from '@angular/cdk/bidi';
 import {BooleanInput, coerceBooleanProperty, coerceStringArray} from '@angular/cdk/coercion';
-import {ESCAPE, UP_ARROW} from '@angular/cdk/keycodes';
+import {ESCAPE, hasModifierKey, UP_ARROW} from '@angular/cdk/keycodes';
 import {
   Overlay,
   OverlayConfig,
@@ -607,8 +607,8 @@ export abstract class MatDatepickerBase<C extends MatDatepickerControl<D>, S,
       this._popupRef.detachments(),
       this._popupRef.keydownEvents().pipe(filter(event => {
         // Closing on alt + up is only valid when there's an input associated with the datepicker.
-        return event.keyCode === ESCAPE ||
-               (this._datepickerInput && event.altKey && event.keyCode === UP_ARROW);
+        return (event.keyCode === ESCAPE && !hasModifierKey(event)) || (this._datepickerInput &&
+            hasModifierKey(event, 'altKey') && event.keyCode === UP_ARROW);
       }))
     ).subscribe(event => {
       if (event) {

src/material/datepicker/datepicker.spec.ts

@@ -223,6 +223,23 @@ describe('MatDatepicker', () => {
         expect(event.defaultPrevented).toBe(true);
       }));
 
+      it('should not close the popup when pressing ESCAPE with a modifier key', fakeAsync(() => {
+        testComponent.datepicker.open();
+        fixture.detectChanges();
+
+        expect(testComponent.datepicker.opened).toBe(true, 'Expected datepicker to be open.');
+
+        const event = dispatchKeyboardEvent(document.body, 'keydown', ESCAPE, undefined, {
+          alt: true
+        });
+        fixture.detectChanges();
+        flush();
+
+        expect(testComponent.datepicker.opened).toBe(true, 'Expected datepicker to stay open.');
+        expect(event.defaultPrevented).toBe(false);
+      }));
+
+
       it('should set the proper role on the popup', fakeAsync(() => {
         testComponent.datepicker.open();
         fixture.detectChanges();

src/material/datepicker/month-view.spec.ts

@@ -333,6 +333,46 @@ describe('MatMonthView', () => {
           expect(testComponent.selected).toBeFalsy();
         });
 
+        it('should not cancel the current range selection when pressing escape with a modifier key',
+          () => {
+            const cellEls = monthViewNativeElement.querySelectorAll('.mat-calendar-body-cell');
+            testComponent.selected = new DateRange(new Date(2017, JAN, 10), null);
+            fixture.detectChanges();
+            dispatchMouseEvent(cellEls[15], 'mouseenter');
+            fixture.detectChanges();
+
+            const rangeStarts =
+                monthViewNativeElement.querySelectorAll('.mat-calendar-body-preview-start').length;
+            const rangeMids =
+                monthViewNativeElement.querySelectorAll('.mat-calendar-body-in-preview').length;
+            const rangeEnds =
+                monthViewNativeElement.querySelectorAll('.mat-calendar-body-preview-end').length;
+
+            // Note that here we only care that _some_ kind of range is rendered. There are
+            // plenty of tests in the calendar body which assert that everything is correct.
+            expect(rangeStarts).toBeGreaterThan(0);
+            expect(rangeMids).toBeGreaterThan(0);
+            expect(rangeEnds).toBeGreaterThan(0);
+
+            const event = createKeyboardEvent('keydown', ESCAPE, 'Escape', {alt: true});
+            spyOn(event, 'stopPropagation');
+            dispatchEvent(calendarBodyEl, event);
+            fixture.detectChanges();
+
+            expect(
+              monthViewNativeElement.querySelectorAll('.mat-calendar-body-preview-start').length
+            ).toBe(rangeStarts);
+            expect(
+              monthViewNativeElement.querySelectorAll('.mat-calendar-body-in-preview').length
+            ).toBe(rangeMids);
+            expect(
+              monthViewNativeElement.querySelectorAll('.mat-calendar-body-preview-end').length
+            ).toBe(rangeEnds);
+            expect(event.stopPropagation).not.toHaveBeenCalled();
+            expect(event.defaultPrevented).toBe(false);
+            expect(testComponent.selected).toBeTruthy();
+          });
+
         it('should not clear the range when pressing escape while there is no preview', () => {
           const getRangeElements = () => monthViewNativeElement.querySelectorAll([
             '.mat-calendar-body-range-start',

src/material/datepicker/month-view.ts

@@ -18,6 +18,7 @@ import {
   UP_ARROW,
   SPACE,
   ESCAPE,
+  hasModifierKey,
 } from '@angular/cdk/keycodes';
 import {
   AfterContentInit,
@@ -290,7 +291,7 @@ export class MatMonthView<D> implements AfterContentInit, OnChanges, OnDestroy {
         return;
       case ESCAPE:
         // Abort the current range selection if the user presses escape mid-selection.
-        if (this._previewEnd != null) {
+        if (this._previewEnd != null && !hasModifierKey(event)) {
           this._previewStart = this._previewEnd = null;
           this.selectedChange.emit(null);
           this._userSelection.emit({value: null, event});