revert(ripple): handle touch events

Reverts the `ripple(): handle touch events` commit from PR#7299. With the current touch solution, ripples are showing up twice on click.

This is because after a `touchstart` event, the touch browser fires a `mousedown` event. This causes the ripple renderer to fade in another ripple from the `mousedown` event.

There are solutions like:

* Timeout to ignore `mousedown` events
* Calling `preventDefault` / `stopPropagation` on `touchstart`
* Listening to `pointerdown`, `pointerup`, `pointerleave` events
* Using feature detecton (as in Modernizr)

All of those solutions have negative aspects on the UX of the ripples and need to be evaluated with more testing.

For now the ripples are broken and should be fixed as soon as possible. This is going to be revisited.

Author: devversion

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

@@ -40,8 +40,8 @@ export class RippleRenderer {
   /** Element which triggers the ripple elements on mouse events. */
   private _triggerElement: HTMLElement | null;
 
-  /** Whether the pointer is currently being held on the trigger or not. */
-  private _isPointerDown: boolean = false;
+  /** Whether the mouse is currently down or not. */
+  private _isMousedown: boolean = false;
 
   /** Events to be registered on the trigger element. */
   private _triggerEvents = new Map<string, any>();
@@ -62,12 +62,8 @@ export class RippleRenderer {
 
       // Specify events which need to be registered on the trigger.
       this._triggerEvents.set('mousedown', this.onMousedown.bind(this));
-      this._triggerEvents.set('touchstart', this.onTouchstart.bind(this));
-
-      this._triggerEvents.set('mouseup', this.onPointerUp.bind(this));
-      this._triggerEvents.set('touchend', this.onPointerUp.bind(this));
-
-      this._triggerEvents.set('mouseleave', this.onPointerLeave.bind(this));
+      this._triggerEvents.set('mouseup', this.onMouseup.bind(this));
+      this._triggerEvents.set('mouseleave', this.onMouseup.bind(this));
 
       // By default use the host element as trigger element.
       this.setTriggerElement(this._containerElement);
@@ -77,7 +73,7 @@ export class RippleRenderer {
   /**
    * Fades in a ripple at the given coordinates.
    * @param x Coordinate within the element, along the X axis at which to start the ripple.
-   * @param Y Coordinate within the element, along the Y axis at which to start the ripple.
+   * @param y Coordinate within the element, along the Y axis at which to start the ripple.
    * @param config Extra ripple options.
    */
   fadeInRipple(x: number, y: number, config: RippleConfig = {}): RippleRef {
@@ -126,7 +122,7 @@ export class RippleRenderer {
     this.runTimeoutOutsideZone(() => {
       rippleRef.state = RippleState.VISIBLE;
 
-      if (!config.persistent && !this._isPointerDown) {
+      if (!config.persistent && !this._isMousedown) {
         rippleRef.fadeOut();
       }
     }, duration);
@@ -182,14 +178,18 @@ export class RippleRenderer {
   /** Function being called whenever the trigger is being pressed. */
   private onMousedown(event: MouseEvent) {
     if (!this.rippleDisabled) {
-      this._isPointerDown = true;
-      this.fadeInRipple(event.clientX, event.clientY, this.rippleConfig);
+      this._isMousedown = true;
+      this.fadeInRipple(event.pageX, event.pageY, this.rippleConfig);
     }
   }
 
-  /** Function being called whenever the pointer is being released. */
-  private onPointerUp() {
-    this._isPointerDown = false;
+  /** Function being called whenever the trigger is being released. */
+  private onMouseup() {
+    if (!this._isMousedown) {
+      return;
+    }
+
+    this._isMousedown = false;
 
     // Fade-out all ripples that are completely visible and not persistent.
     this._activeRipples.forEach(ripple => {
@@ -199,22 +199,6 @@ export class RippleRenderer {
     });
   }
 
-  /** Function being called whenever the pointer leaves the trigger. */
-  private onPointerLeave() {
-    if (this._isPointerDown) {
-      this.onPointerUp();
-    }
-  }
-
-  /** Function being called whenever the trigger is being touched. */
-  private onTouchstart(event: TouchEvent) {
-    if (!this.rippleDisabled) {
-      const {clientX, clientY} = event.touches[0];
-      this._isPointerDown = true;
-      this.fadeInRipple(clientX, clientY, this.rippleConfig);
-    }
-  }
-
   /** Runs a timeout outside of the Angular zone to avoid triggering the change detection. */
   private runTimeoutOutsideZone(fn: Function, delay = 0) {
     this._ngZone.runOutsideAngular(() => setTimeout(fn, delay));

src/lib/core/ripple/ripple.spec.ts

@@ -104,20 +104,6 @@ describe('MatRipple', () => {
       expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(2);
     });
 
-    it('should launch ripples on touchstart', fakeAsync(() => {
-      dispatchTouchEvent(rippleTarget, 'touchstart');
-      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);
-
-      tick(RIPPLE_FADE_IN_DURATION);
-      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);
-
-      dispatchTouchEvent(rippleTarget, 'touchend');
-
-      tick(RIPPLE_FADE_OUT_DURATION);
-
-      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
-    }));
-
     it('removes ripple after timeout', fakeAsync(() => {
       dispatchMouseEvent(rippleTarget, 'mousedown');
       dispatchMouseEvent(rippleTarget, 'mouseup');