From b16a33dbb29136dbf230b37cd9d12d46376c210d Mon Sep 17 00:00:00 2001
From: Wagner Maciel <wagnermaciel@google.com>
Date: Thu, 21 Apr 2022 14:26:55 +0000
Subject: [PATCH] =?UTF-8?q?fix(material-experimental/mdc-slider):=20remove?=
 =?UTF-8?q?=20pointerdown=20passive=20eve=E2=80=A6=20(#24766)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(material-experimental/mdc-slider): remove pointerdown passive event listener options

* setting {passive: true} causes the slider foundation to
  error when it calls event.preventDefault

* fixup! fix(material-experimental/mdc-slider): remove pointerdown passive event listener options

* fixup! fix(material-experimental/mdc-slider): remove pointerdown passive event listener options

* fixup! fix(material-experimental/mdc-slider): remove pointerdown passive event listener options

(cherry picked from commit ce67406f4ac6ed7a4ed9bb7be4299edea1cc72bd)
---
 src/e2e-app/mdc-slider/mdc-slider-e2e.ts      |  2 +-
 .../mdc-slider/slider.e2e.spec.ts             | 33 ++++++++++++++++++-
 .../mdc-slider/slider.ts                      | 16 +++------
 3 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/src/e2e-app/mdc-slider/mdc-slider-e2e.ts b/src/e2e-app/mdc-slider/mdc-slider-e2e.ts
index 2aff71228687..8997dcada55f 100644
--- a/src/e2e-app/mdc-slider/mdc-slider-e2e.ts
+++ b/src/e2e-app/mdc-slider/mdc-slider-e2e.ts
@@ -11,7 +11,7 @@ import {Component} from '@angular/core';
 @Component({
   selector: 'mdc-slider-e2e',
   template: `
-    <mat-slider id="standard-slider">
+    <mat-slider id="standard-slider" discrete>
       <input aria-label="Standard slider" matSliderThumb>
     </mat-slider>
 
diff --git a/src/material-experimental/mdc-slider/slider.e2e.spec.ts b/src/material-experimental/mdc-slider/slider.e2e.spec.ts
index 6ccc1384cb3a..757d67b84fde 100644
--- a/src/material-experimental/mdc-slider/slider.e2e.spec.ts
+++ b/src/material-experimental/mdc-slider/slider.e2e.spec.ts
@@ -8,7 +8,8 @@
 
 import {clickElementAtPoint, getElement, Point} from '../../cdk/testing/private/e2e';
 import {Thumb} from '@material/slider';
-import {browser, by, element, ElementFinder} from 'protractor';
+import {$, browser, by, element, ElementFinder} from 'protractor';
+import {logging} from 'selenium-webdriver';
 
 describe('MDC-based MatSlider', () => {
   const getStandardSlider = () => element(by.id('standard-slider'));
@@ -32,6 +33,29 @@ describe('MDC-based MatSlider', () => {
       await slideToValue(slider, 35, Thumb.END);
       expect(await getSliderValue(slider, Thumb.END)).toBe(35);
     });
+
+    it('should display the value indicator when focused', async () => {
+      await focusSliderThumb(slider, Thumb.END);
+      const rect: DOMRect = await browser.executeScript(
+        'return arguments[0].getBoundingClientRect();',
+        $('.mdc-slider__value-indicator'),
+      );
+
+      expect(rect.width).not.toBe(0);
+      expect(rect.height).not.toBe(0);
+
+      await browser.actions().mouseUp().perform();
+    });
+
+    it('should not cause passive event listener errors when changing the value', async () => {
+      // retrieving the logs clears the collection
+      await browser.manage().logs().get('browser');
+      await setValueByClick(slider, 15);
+
+      expect(await browser.manage().logs().get('browser')).not.toContain(
+        jasmine.objectContaining({level: logging.Level.SEVERE}),
+      );
+    });
   });
 
   describe('disabled slider', async () => {
@@ -96,6 +120,13 @@ async function getSliderValue(slider: ElementFinder, thumbPosition: Thumb): Prom
     : Number(await inputs[0].getAttribute('value'));
 }
 
+/** Focuses on the MatSlider at the coordinates corresponding to the given thumb. */
+async function focusSliderThumb(slider: ElementFinder, thumbPosition: Thumb): Promise<void> {
+  const webElement = await getElement(slider).getWebElement();
+  const coords = await getCoordsForValue(slider, await getSliderValue(slider, thumbPosition));
+  return await browser.actions().mouseMove(webElement, coords).mouseDown().perform();
+}
+
 /** Clicks on the MatSlider at the coordinates corresponding to the given value. */
 async function setValueByClick(slider: ElementFinder, value: number): Promise<void> {
   return clickElementAtPoint(slider, await getCoordsForValue(slider, value));
diff --git a/src/material-experimental/mdc-slider/slider.ts b/src/material-experimental/mdc-slider/slider.ts
index a5e5b6c5df3d..789883465a48 100644
--- a/src/material-experimental/mdc-slider/slider.ts
+++ b/src/material-experimental/mdc-slider/slider.ts
@@ -781,11 +781,7 @@ export class MatSlider
     // would prefer to use "mousedown" as the default, for some reason it does not work (the
     // callback is never triggered).
     if (this._SUPPORTS_POINTER_EVENTS) {
-      this._elementRef.nativeElement.addEventListener(
-        'pointerdown',
-        this._layout,
-        passiveEventListenerOptions,
-      );
+      this._elementRef.nativeElement.addEventListener('pointerdown', this._layout);
     } else {
       this._elementRef.nativeElement.addEventListener('mouseenter', this._layout);
       this._elementRef.nativeElement.addEventListener(
@@ -799,11 +795,7 @@ export class MatSlider
   /** Removes the event listener that keeps sync the slider UI and the foundation in sync. */
   _removeUISyncEventListener(): void {
     if (this._SUPPORTS_POINTER_EVENTS) {
-      this._elementRef.nativeElement.removeEventListener(
-        'pointerdown',
-        this._layout,
-        passiveEventListenerOptions,
-      );
+      this._elementRef.nativeElement.removeEventListener('pointerdown', this._layout);
     } else {
       this._elementRef.nativeElement.removeEventListener('mouseenter', this._layout);
       this._elementRef.nativeElement.removeEventListener(
@@ -1134,10 +1126,10 @@ class SliderAdapter implements MDCSliderAdapter {
   getThumbKnobWidth = (thumbPosition: Thumb): number => {
     return this._delegate._getKnobElement(thumbPosition).getBoundingClientRect().width;
   };
-  getThumbBoundingClientRect = (thumbPosition: Thumb): ClientRect => {
+  getThumbBoundingClientRect = (thumbPosition: Thumb): DOMRect => {
     return this._delegate._getThumbElement(thumbPosition).getBoundingClientRect();
   };
-  getBoundingClientRect = (): ClientRect => {
+  getBoundingClientRect = (): DOMRect => {
     return this._delegate._elementRef.nativeElement.getBoundingClientRect();
   };
   getValueIndicatorContainerWidth = (thumbPosition: Thumb): number => {