fix: pass passive false for touch events in listenOnTheHost (#137)

Author: jcrymble-clickup

projects/angular-resizable-element/src/lib/resize-handle.directive.ts

@@ -12,6 +12,7 @@ import { fromEvent, merge, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { ResizableDirective } from './resizable.directive';
 import { Edges } from './interfaces/edges.interface';
+import { getListenOptions } from './util/get-listen-options';
 import { IS_TOUCH_DEVICE } from './util/is-touch-device';
 
 /**
@@ -173,8 +174,10 @@ export class ResizeHandleDirective implements OnInit, OnDestroy {
   }
 
   private listenOnTheHost<T extends Event>(eventName: string) {
-    return fromEvent<T>(this.element.nativeElement, eventName).pipe(
-      takeUntil(this.destroy$),
-    );
+    return fromEvent<T>(
+      this.element.nativeElement,
+      eventName,
+      getListenOptions(eventName),
+    ).pipe(takeUntil(this.destroy$));
   }
 }

projects/angular-resizable-element/src/lib/util/get-listen-options.ts

@@ -0,0 +1,14 @@
+/**
+ * Options for fromEvent when listening on the host.
+ * Touch events need passive: false so preventDefault can be called.
+ * @hidden
+ */
+export function getListenOptions(
+  eventName: string,
+): { passive: false } | Record<string, never> {
+  const isTouchEvent =
+    eventName === 'touchstart' ||
+    eventName === 'touchend' ||
+    eventName === 'touchcancel';
+  return isTouchEvent ? { passive: false } : {};
+}

projects/angular-resizable-element/src/test/resizable.spec.ts

@@ -5,6 +5,7 @@ import {
   ResizeEvent,
   ResizeHandleDirective,
 } from 'angular-resizable-element';
+import { getListenOptions } from '../lib/util/get-listen-options';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { expect } from 'chai';
 import * as sinon from 'sinon';
@@ -506,6 +507,20 @@ describe('resizable directive', () => {
     });
   });
 
+  describe('touch event listeners', () => {
+    ['touchstart', 'touchend', 'touchcancel'].forEach((eventName) => {
+      it(`when eventName is ${eventName}, getListenOptions returns passive: false so fromEvent is called with passive: false`, () => {
+        expect(getListenOptions(eventName)).to.deep.equal({ passive: false });
+      });
+    });
+
+    ['mousedown', 'mouseup'].forEach((eventName) => {
+      it(`when eventName is ${eventName}, getListenOptions returns empty options`, () => {
+        expect(getListenOptions(eventName)).to.deep.equal({});
+      });
+    });
+  });
+
   describe('handle outside of element', () => {
     let domEvents: Array<{
       name: string;