fix(ripple): ripples not being cleared if touch sequence is canceled (#12936)

If the browser's touch sequence gets canceled by something, the `touchend` event won't fire which means that the ripples won't be cleared from the ripple container. These changes add an extra handler to make sure that they are.

Author: crisbeto

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

@@ -110,12 +110,14 @@ export class RippleRenderer {
       this._containerElement = elementRef.nativeElement;
 
       // Specify events which need to be registered on the trigger.
-      this._triggerEvents.set('mousedown', this.onMousedown);
-      this._triggerEvents.set('mouseup', this.onPointerUp);
-      this._triggerEvents.set('mouseleave', this.onPointerUp);
-
-      this._triggerEvents.set('touchstart', this.onTouchStart);
-      this._triggerEvents.set('touchend', this.onPointerUp);
+      this._triggerEvents
+        .set('mousedown', this.onMousedown)
+        .set('mouseup', this.onPointerUp)
+        .set('mouseleave', this.onPointerUp)
+
+        .set('touchstart', this.onTouchStart)
+        .set('touchend', this.onPointerUp)
+        .set('touchcancel', this.onPointerUp);
     }
   }
 

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

@@ -1,5 +1,6 @@
 import {Platform} from '@angular/cdk/platform';
 import {
+  createTouchEvent,
   createMouseEvent,
   dispatchEvent,
   dispatchMouseEvent,
@@ -130,6 +131,43 @@ describe('MatRipple', () => {
       expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
     }));
 
+    it('should clear ripples if the touch sequence is cancelled', fakeAsync(() => {
+      dispatchTouchEvent(rippleTarget, 'touchstart');
+      tick(enterDuration);
+      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);
+
+      dispatchTouchEvent(rippleTarget, 'touchcancel');
+      tick(exitDuration);
+
+      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
+    }));
+
+    it('should launch multiple ripples for multi-touch', fakeAsync(() => {
+      const touchEvent = createTouchEvent('touchstart');
+
+      Object.defineProperties(touchEvent, {
+        changedTouches: {
+          value: [
+            {pageX: 0, pageY: 0},
+            {pageX: 10, pageY: 10},
+            {pageX: 20, pageY: 20}
+          ]
+        }
+      });
+
+      dispatchEvent(rippleTarget, touchEvent);
+      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(3);
+
+      tick(enterDuration);
+      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(3);
+
+      dispatchTouchEvent(rippleTarget, 'touchend');
+
+      tick(exitDuration);
+
+      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
+    }));
+
     it('should ignore synthetic mouse events after touchstart', () => fakeAsync(() => {
       dispatchTouchEvent(rippleTarget, 'touchstart');
       dispatchTouchEvent(rippleTarget, 'mousedown');