fix(datepicker): cancel current range selection when pressing escape (#18630)

Adds some extra logic so that the user can abort the current range selection if they press the escape key.

Author: crisbeto

src/material/datepicker/calendar-body.ts

@@ -148,6 +148,10 @@ export class MatCalendarBody implements OnChanges, OnDestroy {
     if (columnChanges || !this._cellWidth) {
       this._cellWidth = `${100 / numCols}%`;
     }
+
+    if (changes['startValue'] || changes['endValue']) {
+      this._hoveredValue = -1;
+    }
   }
 
   ngOnDestroy() {

src/material/datepicker/month-view.ts

@@ -17,6 +17,7 @@ import {
   RIGHT_ARROW,
   UP_ARROW,
   SPACE,
+  ESCAPE,
 } from '@angular/cdk/keycodes';
 import {
   AfterContentInit,
@@ -239,6 +240,15 @@ export class MatMonthView<D> implements AfterContentInit, OnDestroy {
           event.preventDefault();
         }
         return;
+      case ESCAPE:
+        // Abort the current range selection if the user presses escape mid-selection.
+        if (this._matCalendarBody._hoveredValue > -1) {
+          this.selectedChange.emit(null);
+          this._userSelection.emit();
+          event.preventDefault();
+          event.stopPropagation(); // Prevents the overlay from closing.
+        }
+        return;
       default:
         // Don't prevent default or focus active cell on keys that we don't explicitly handle.
         return;