refactor(platform): add utility to normalize passive event listener options (#13533)

Author: crisbeto

src/cdk/a11y/focus-monitor/focus-monitor.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Platform, supportsPassiveEventListeners} from '@angular/cdk/platform';
+import {Platform, normalizePassiveListenerOptions} from '@angular/cdk/platform';
 import {
   Directive,
   ElementRef,
@@ -243,8 +243,10 @@ export class FocusMonitor implements OnDestroy {
 
     // Event listener options that enable capturing and also mark the the listener as passive
     // if the browser supports it.
-    const captureEventListenerOptions = supportsPassiveEventListeners() ?
-      {passive: true, capture: true} : true;
+    const captureEventListenerOptions = normalizePassiveListenerOptions({
+      passive: true,
+      capture: true
+    });
 
     // Note: we listen to events in the capture phase so we can detect them even if the user stops
     // propagation.

src/cdk/drag-drop/drag-drop-registry.ts

@@ -8,12 +8,12 @@
 
 import {Injectable, NgZone, OnDestroy, Inject} from '@angular/core';
 import {DOCUMENT} from '@angular/common';
-import {supportsPassiveEventListeners} from '@angular/cdk/platform';
+import {normalizePassiveListenerOptions} from '@angular/cdk/platform';
 import {Subject} from 'rxjs';
 import {toggleNativeDragInteractions} from './drag-styling';
 
 /** Event options that can be used to bind an active event. */
-const activeEventOptions = supportsPassiveEventListeners() ? {passive: false} : false;
+const activeEventOptions = normalizePassiveListenerOptions({passive: false});
 
 /** Handler for a pointer event callback. */
 type PointerEventHandler = (event: TouchEvent | MouseEvent) => void;

src/cdk/platform/features/passive-listeners.ts

@@ -26,3 +26,14 @@ export function supportsPassiveEventListeners(): boolean {
 
   return supportsPassiveEvents;
 }
+
+/**
+ * Normalizes an `AddEventListener` object to something that can be passed
+ * to `addEventListener` on any browser, no matter whether it supports the
+ * `options` parameter.
+ * @param options Object to be normalized.
+ */
+export function normalizePassiveListenerOptions(options: AddEventListenerOptions):
+  AddEventListenerOptions | boolean {
+  return supportsPassiveEventListeners() ? options : !!options.capture;
+}

src/cdk/text-field/autofill.spec.ts

@@ -6,15 +6,15 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {supportsPassiveEventListeners} from '@angular/cdk/platform';
+import {normalizePassiveListenerOptions} from '@angular/cdk/platform';
 import {Component, ElementRef, NgZone, ViewChild} from '@angular/core';
 import {ComponentFixture, inject, TestBed} from '@angular/core/testing';
 import {EMPTY} from 'rxjs';
 import {AutofillEvent, AutofillMonitor} from './autofill';
 import {TextFieldModule} from './text-field-module';
 
 
-const listenerOptions: any = supportsPassiveEventListeners() ? {passive: true} : false;
+const listenerOptions = normalizePassiveListenerOptions({passive: true});
 
 
 describe('AutofillMonitor', () => {

src/cdk/text-field/autofill.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Platform, supportsPassiveEventListeners} from '@angular/cdk/platform';
+import {Platform, normalizePassiveListenerOptions} from '@angular/cdk/platform';
 import {
   Directive,
   ElementRef,
@@ -37,7 +37,7 @@ type MonitoredElementInfo = {
 
 
 /** Options to pass to the animationstart listener. */
-const listenerOptions: any = supportsPassiveEventListeners() ? {passive: true} : false;
+const listenerOptions = normalizePassiveListenerOptions({passive: true});
 
 
 /**

src/lib/core/ripple/ripple-renderer.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import {ElementRef, NgZone} from '@angular/core';
-import {Platform, supportsPassiveEventListeners} from '@angular/cdk/platform';
+import {Platform, normalizePassiveListenerOptions} from '@angular/cdk/platform';
 import {isFakeMousedownFromScreenReader} from '@angular/cdk/a11y';
 import {RippleRef, RippleState} from './ripple-ref';
 
@@ -57,6 +57,9 @@ export const defaultRippleAnimationConfig = {
  */
 const ignoreMouseEventsTimeout = 800;
 
+/** Options that apply to all the event listeners that are bound by the ripple renderer. */
+const passiveEventOptions = normalizePassiveListenerOptions({passive: true});
+
 /**
  * Helper service that performs DOM manipulations. Not intended to be used outside this module.
  * The constructor takes a reference to the ripple directive's host element and a map of DOM
@@ -86,9 +89,6 @@ export class RippleRenderer {
   /** Time in milliseconds when the last touchstart event happened. */
   private _lastTouchStartEvent: number;
 
-  /** Options that apply to all the event listeners that are bound by the renderer. */
-  private _eventOptions = supportsPassiveEventListeners() ? ({passive: true} as any) : false;
-
   /**
    * Cached dimensions of the ripple container. Set when the first
    * ripple is shown and cleared once no more ripples are visible.
@@ -235,8 +235,9 @@ export class RippleRenderer {
     this._removeTriggerEvents();
 
     this._ngZone.runOutsideAngular(() => {
-      this._triggerEvents.forEach((fn, type) =>
-          element.addEventListener(type, fn, this._eventOptions));
+      this._triggerEvents.forEach((fn, type) => {
+        element.addEventListener(type, fn, passiveEventOptions);
+      });
     });
 
     this._triggerElement = element;
@@ -305,7 +306,7 @@ export class RippleRenderer {
   _removeTriggerEvents() {
     if (this._triggerElement) {
       this._triggerEvents.forEach((fn, type) => {
-        this._triggerElement!.removeEventListener(type, fn, this._eventOptions);
+        this._triggerElement!.removeEventListener(type, fn, passiveEventOptions);
       });
     }
   }