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 => {