fix(material-experimental/mdc-slider): remove pointerdown passive eve… (

#24766) * 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
angular · Apr 21, 2022 · ce67406 · ce67406
1 parent d3428ba
commit ce67406
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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 => {