fix(material/datepicker): set explicit event options (#27082)

Fixes that the date range picker might log a warning, because we aren't setting some events as explicitly active.

Fixes #27072.

(cherry picked from commit fc919ce)

Author: crisbeto

src/material/datepicker/calendar-body.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Platform} from '@angular/cdk/platform';
+import {Platform, normalizePassiveListenerOptions} from '@angular/cdk/platform';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -57,6 +57,21 @@ export interface MatCalendarUserEvent<D> {
 
 let calendarBodyId = 1;
 
+/** Event options that can be used to bind an active, capturing event. */
+const activeCapturingEventOptions = normalizePassiveListenerOptions({
+  passive: false,
+  capture: true,
+});
+
+/** Event options that can be used to bind a passive, capturing event. */
+const passiveCapturingEventOptions = normalizePassiveListenerOptions({
+  passive: true,
+  capture: true,
+});
+
+/** Event options that can be used to bind a passive, non-capturing event. */
+const passiveEventOptions = normalizePassiveListenerOptions({passive: true});
+
 /**
  * An internal component used to display calendar data in a table.
  * @docs-private
@@ -174,13 +189,17 @@ export class MatCalendarBody<D = any> implements OnChanges, OnDestroy, AfterView
   constructor(private _elementRef: ElementRef<HTMLElement>, private _ngZone: NgZone) {
     _ngZone.runOutsideAngular(() => {
       const element = _elementRef.nativeElement;
-      element.addEventListener('mouseenter', this._enterHandler, true);
-      element.addEventListener('touchmove', this._touchmoveHandler, true);
-      element.addEventListener('focus', this._enterHandler, true);
-      element.addEventListener('mouseleave', this._leaveHandler, true);
-      element.addEventListener('blur', this._leaveHandler, true);
-      element.addEventListener('mousedown', this._mousedownHandler);
-      element.addEventListener('touchstart', this._mousedownHandler);
+
+      // `touchmove` is active since we need to call `preventDefault`.
+      element.addEventListener('touchmove', this._touchmoveHandler, activeCapturingEventOptions);
+
+      element.addEventListener('mouseenter', this._enterHandler, passiveCapturingEventOptions);
+      element.addEventListener('focus', this._enterHandler, passiveCapturingEventOptions);
+      element.addEventListener('mouseleave', this._leaveHandler, passiveCapturingEventOptions);
+      element.addEventListener('blur', this._leaveHandler, passiveCapturingEventOptions);
+
+      element.addEventListener('mousedown', this._mousedownHandler, passiveEventOptions);
+      element.addEventListener('touchstart', this._mousedownHandler, passiveEventOptions);
 
       if (this._platform.isBrowser) {
         window.addEventListener('mouseup', this._mouseupHandler);
@@ -232,13 +251,16 @@ export class MatCalendarBody<D = any> implements OnChanges, OnDestroy, AfterView
 
   ngOnDestroy() {
     const element = this._elementRef.nativeElement;
-    element.removeEventListener('mouseenter', this._enterHandler, true);
-    element.removeEventListener('touchmove', this._touchmoveHandler, true);
-    element.removeEventListener('focus', this._enterHandler, true);
-    element.removeEventListener('mouseleave', this._leaveHandler, true);
-    element.removeEventListener('blur', this._leaveHandler, true);
-    element.removeEventListener('mousedown', this._mousedownHandler);
-    element.removeEventListener('touchstart', this._mousedownHandler);
+
+    element.removeEventListener('touchmove', this._touchmoveHandler, activeCapturingEventOptions);
+
+    element.removeEventListener('mouseenter', this._enterHandler, passiveCapturingEventOptions);
+    element.removeEventListener('focus', this._enterHandler, passiveCapturingEventOptions);
+    element.removeEventListener('mouseleave', this._leaveHandler, passiveCapturingEventOptions);
+    element.removeEventListener('blur', this._leaveHandler, passiveCapturingEventOptions);
+
+    element.removeEventListener('mousedown', this._mousedownHandler, passiveEventOptions);
+    element.removeEventListener('touchstart', this._mousedownHandler, passiveEventOptions);
 
     if (this._platform.isBrowser) {
       window.removeEventListener('mouseup', this._mouseupHandler);