fix(material/datepicker): fix date picker shortcuts (#25951)

* fix(material/datepicker): fix date picker shortcuts

Fixes a bug in the Angular Material `datepicker` component where the
datepicker should open/close only on alt+down and alt+up respectively
but using shift + ctrl + alt + down or ctrl + alt + down the datepicker
was opening, and same happens for closing the date picker added a
condition to check if ctrl, shift or meta keys are present and if it
is present restricting datepicker to not to open/close.

Fixes #25868

* fix(material/datepicker): fix date picker shortcuts 

Fixes a bug in the Angular Material datepicker component where the datepicker should open/close only on alt+down and alt+up respectively but using shift + ctrl + alt + down or ctrl + alt + down the datepicker was opening, and same happens for closing the date picker added a condition to check if ctrl, shift or meta keys are present and if it is present restricting datepicker to not to open/close.

Fixes #25868

Author: sasidharansd

src/cdk/keycodes/modifiers.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-type ModifierKey = 'altKey' | 'shiftKey' | 'ctrlKey' | 'metaKey';
+export type ModifierKey = 'altKey' | 'shiftKey' | 'ctrlKey' | 'metaKey';
 
 /**
  * Checks whether a modifier key is pressed.

src/material/datepicker/datepicker-base.ts

@@ -13,6 +13,7 @@ import {
   ESCAPE,
   hasModifierKey,
   LEFT_ARROW,
+  ModifierKey,
   PAGE_DOWN,
   PAGE_UP,
   RIGHT_ARROW,
@@ -819,6 +820,7 @@ export abstract class MatDatepickerBase<
 
   /** Gets an observable that will emit when the overlay is supposed to be closed. */
   private _getCloseStream(overlayRef: OverlayRef) {
+    const ctrlShiftMetaModifiers: ModifierKey[] = ['ctrlKey', 'shiftKey', 'metaKey'];
     return merge(
       overlayRef.backdropClick(),
       overlayRef.detachments(),
@@ -827,7 +829,12 @@ export abstract class MatDatepickerBase<
           // Closing on alt + up is only valid when there's an input associated with the datepicker.
           return (
             (event.keyCode === ESCAPE && !hasModifierKey(event)) ||
-            (this.datepickerInput && hasModifierKey(event, 'altKey') && event.keyCode === UP_ARROW)
+            (this.datepickerInput &&
+              hasModifierKey(event, 'altKey') &&
+              event.keyCode === UP_ARROW &&
+              ctrlShiftMetaModifiers.every(
+                (modifier: ModifierKey) => !hasModifierKey(event, modifier),
+              ))
           );
         }),
       ),

src/material/datepicker/datepicker-input-base.ts

@@ -7,7 +7,7 @@
  */
 
 import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
-import {DOWN_ARROW} from '@angular/cdk/keycodes';
+import {DOWN_ARROW, hasModifierKey, ModifierKey} from '@angular/cdk/keycodes';
 import {
   Directive,
   ElementRef,
@@ -305,7 +305,11 @@ export abstract class MatDatepickerInputBase<S, D = ExtractDateTypeFromSelection
   }
 
   _onKeydown(event: KeyboardEvent) {
-    const isAltDownArrow = event.altKey && event.keyCode === DOWN_ARROW;
+    const ctrlShiftMetaModifiers: ModifierKey[] = ['ctrlKey', 'shiftKey', 'metaKey'];
+    const isAltDownArrow =
+      hasModifierKey(event, 'altKey') &&
+      event.keyCode === DOWN_ARROW &&
+      ctrlShiftMetaModifiers.every((modifier: ModifierKey) => !hasModifierKey(event, modifier));
 
     if (isAltDownArrow && !this._elementRef.nativeElement.readOnly) {
       this._openPopup();

src/material/datepicker/datepicker.spec.ts

@@ -550,6 +550,27 @@ describe('MatDatepicker', () => {
         expect(testComponent.datepicker.opened).toBe(false);
       }));
 
+      it('should not close the datepicker when using CTRL + SHIFT + ALT + UP_ARROW', fakeAsync(() => {
+        testComponent.datepicker.open();
+        fixture.detectChanges();
+        tick();
+        flush();
+
+        expect(testComponent.datepicker.opened).toBe(true);
+
+        const event = createKeyboardEvent('keydown', UP_ARROW, undefined, {
+          alt: true,
+          shift: true,
+          control: true,
+        });
+
+        dispatchEvent(document.body, event);
+        fixture.detectChanges();
+        flush();
+
+        expect(testComponent.datepicker.opened).toBe(true);
+      }));
+
       it('should open the datepicker using ALT + DOWN_ARROW', fakeAsync(() => {
         expect(testComponent.datepicker.opened).toBe(false);
 
@@ -581,6 +602,24 @@ describe('MatDatepicker', () => {
         expect(event.defaultPrevented).toBe(false);
       }));
 
+      it('should not open the datepicker using SHIFT + CTRL + ALT + DOWN_ARROW', fakeAsync(() => {
+        expect(testComponent.datepicker.opened).toBe(false);
+
+        const event = createKeyboardEvent('keydown', DOWN_ARROW, undefined, {
+          alt: true,
+          shift: true,
+          control: true,
+        });
+
+        dispatchEvent(fixture.nativeElement.querySelector('input'), event);
+        fixture.detectChanges();
+        tick();
+        flush();
+
+        expect(testComponent.datepicker.opened).toBe(false);
+        expect(event.defaultPrevented).toBe(false);
+      }));
+
       it('should show the invisible close button on focus', fakeAsync(() => {
         testComponent.opened = true;
         fixture.detectChanges();

tools/public_api_guard/cdk/keycodes.md

@@ -190,6 +190,9 @@ export const MAC_WK_CMD_RIGHT = 93;
 // @public (undocumented)
 export const META = 91;
 
+// @public
+export type ModifierKey = 'altKey' | 'shiftKey' | 'ctrlKey' | 'metaKey';
+
 // @public (undocumented)
 export const MUTE = 173;