fix(material/slider): incorrectly attributing touches for multiple touch events (#22615)

`mat-slider` is set up so that it binds global `touchmove` and `touchend` events after dragging starts so that the user can drag while not keeping their finger right on top of the slider. The problem is that currently we only use the first touch from the list of touches which means that if the user is dragging more than one slider on a multi-touch device, they'll all have the same value.

These changes add some logic that attributes the events to the slider that started the dragging sequence.

Fixes #22614.

Author: crisbeto

src/cdk/testing/testbed/fake-events/event-objects.ts

@@ -8,6 +8,9 @@
 
 import {ModifierKeys} from '@angular/cdk/testing';
 
+/** Used to generate unique IDs for events. */
+let uniqueIds = 0;
+
 /**
  * Creates a browser MouseEvent with the specified options.
  * @docs-private
@@ -83,7 +86,7 @@ export function createTouchEvent(type: string, pageX = 0, pageY = 0, clientX = 0
   // In favor of creating events that work for most of the browsers, the event is created
   // as a basic UI Event. The necessary details for the event will be set manually.
   const event = document.createEvent('UIEvent');
-  const touchDetails = {pageX, pageY, clientX, clientY};
+  const touchDetails = {pageX, pageY, clientX, clientY, id: uniqueIds++};
 
   // TS3.6 removes the initUIEvent method and suggests porting to "new UIEvent()".
   (event as any).initUIEvent(type, true, true, window, 0);

src/material/slider/slider.ts

@@ -503,6 +503,15 @@ export class MatSlider extends _MatSliderMixinBase
   /** Used to subscribe to global move and end events */
   protected _document: Document;
 
+  /**
+   * Identifier used to attribute a touch event to a particular slider.
+   * Will be undefined if one of the following conditions is true:
+   * - The user isn't dragging using a touch device.
+   * - The browser doesn't support `Touch.identifier`.
+   * - Dragging hasn't started yet.
+   */
+  private _touchId: number | undefined;
+
   constructor(elementRef: ElementRef,
               private _focusMonitor: FocusMonitor,
               private _changeDetectorRef: ChangeDetectorRef,
@@ -636,21 +645,26 @@ export class MatSlider extends _MatSliderMixinBase
     }
 
     this._ngZone.run(() => {
-      const oldValue = this.value;
-      const pointerPosition = getPointerPositionOnPage(event);
-      this._isSliding = true;
-      this._lastPointerEvent = event;
-      event.preventDefault();
-      this._focusHostElement();
-      this._onMouseenter(); // Simulate mouseenter in case this is a mobile device.
-      this._bindGlobalEvents(event);
-      this._focusHostElement();
-      this._updateValueFromPosition(pointerPosition);
-      this._valueOnSlideStart = oldValue;
-
-      // Emit a change and input event if the value changed.
-      if (oldValue != this.value) {
-        this._emitInputEvent();
+      this._touchId = isTouchEvent(event) ?
+          getTouchIdForSlider(event, this._elementRef.nativeElement) : undefined;
+      const pointerPosition = getPointerPositionOnPage(event, this._touchId);
+
+      if (pointerPosition) {
+        const oldValue = this.value;
+        this._isSliding = true;
+        this._lastPointerEvent = event;
+        event.preventDefault();
+        this._focusHostElement();
+        this._onMouseenter(); // Simulate mouseenter in case this is a mobile device.
+        this._bindGlobalEvents(event);
+        this._focusHostElement();
+        this._updateValueFromPosition(pointerPosition);
+        this._valueOnSlideStart = oldValue;
+
+        // Emit a change and input event if the value changed.
+        if (oldValue != this.value) {
+          this._emitInputEvent();
+        }
       }
     });
   }
@@ -661,31 +675,41 @@ export class MatSlider extends _MatSliderMixinBase
    */
   private _pointerMove = (event: TouchEvent | MouseEvent) => {
     if (this._isSliding) {
-      // Prevent the slide from selecting anything else.
-      event.preventDefault();
-      const oldValue = this.value;
-      this._lastPointerEvent = event;
-      this._updateValueFromPosition(getPointerPositionOnPage(event));
-
-      // Native range elements always emit `input` events when the value changed while sliding.
-      if (oldValue != this.value) {
-        this._emitInputEvent();
+      const pointerPosition = getPointerPositionOnPage(event, this._touchId);
+
+      if (pointerPosition) {
+        // Prevent the slide from selecting anything else.
+        event.preventDefault();
+        const oldValue = this.value;
+        this._lastPointerEvent = event;
+        this._updateValueFromPosition(pointerPosition);
+
+        // Native range elements always emit `input` events when the value changed while sliding.
+        if (oldValue != this.value) {
+          this._emitInputEvent();
+        }
       }
     }
   }
 
   /** Called when the user has lifted their pointer. Bound on the document level. */
   private _pointerUp = (event: TouchEvent | MouseEvent) => {
     if (this._isSliding) {
-      event.preventDefault();
-      this._removeGlobalEvents();
-      this._isSliding = false;
-
-      if (this._valueOnSlideStart != this.value && !this.disabled) {
-        this._emitChangeEvent();
+      if (!isTouchEvent(event) || typeof this._touchId !== 'number' ||
+          // Note that we use `changedTouches`, rather than `touches` because it
+          // seems like in most cases `touches` is empty for `touchend` events.
+          findMatchingTouch(event.changedTouches, this._touchId)) {
+        event.preventDefault();
+        this._removeGlobalEvents();
+        this._isSliding = false;
+        this._touchId = undefined;
+
+        if (this._valueOnSlideStart != this.value && !this.disabled) {
+          this._emitChangeEvent();
+        }
+
+        this._valueOnSlideStart = this._lastPointerEvent = null;
       }
-
-      this._valueOnSlideStart = this._lastPointerEvent = null;
     }
   }
 
@@ -919,8 +943,47 @@ function isTouchEvent(event: MouseEvent | TouchEvent): event is TouchEvent {
 }
 
 /** Gets the coordinates of a touch or mouse event relative to the viewport. */
-function getPointerPositionOnPage(event: MouseEvent | TouchEvent) {
-  // `touches` will be empty for start/end events so we have to fall back to `changedTouches`.
-  const point = isTouchEvent(event) ? (event.touches[0] || event.changedTouches[0]) : event;
-  return {x: point.clientX, y: point.clientY};
+function getPointerPositionOnPage(event: MouseEvent | TouchEvent, id: number|undefined) {
+  let point: {clientX: number, clientY: number}|undefined;
+
+  if (isTouchEvent(event)) {
+    // The `identifier` could be undefined if the browser doesn't support `TouchEvent.identifier`.
+    // If that's the case, attribute the first touch to all active sliders. This should still cover
+    // the most common case while only breaking multi-touch.
+    if (typeof id === 'number') {
+      point = findMatchingTouch(event.touches, id) || findMatchingTouch(event.changedTouches, id);
+    } else {
+      // `touches` will be empty for start/end events so we have to fall back to `changedTouches`.
+      point = event.touches[0] || event.changedTouches[0];
+    }
+  } else {
+    point = event;
+  }
+
+  return point ? {x: point.clientX, y: point.clientY} : undefined;
+}
+
+/** Finds a `Touch` with a specific ID in a `TouchList`. */
+function findMatchingTouch(touches: TouchList, id: number): Touch | undefined {
+  for (let i = 0; i < touches.length; i++) {
+    if (touches[i].identifier === id) {
+      return touches[i];
+    }
+  }
+
+  return undefined;
+}
+
+
+/** Gets the unique ID of a touch that matches a specific slider. */
+function getTouchIdForSlider(event: TouchEvent, sliderHost: HTMLElement): number | undefined {
+  for (let i = 0; i < event.touches.length; i++) {
+    const target = event.touches[i].target as HTMLElement;
+
+    if (sliderHost === target || sliderHost.contains(target)) {
+      return event.touches[i].identifier;
+    }
+  }
+
+  return undefined;
 }