From a1716f8bd3c00944f1d1b2fc56bd85c0c32a9e12 Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Tue, 12 Apr 2022 19:31:18 +0000 Subject: [PATCH 1/4] 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 --- src/e2e-app/mdc-slider/mdc-slider-e2e.ts | 2 +- .../mdc-slider/slider.e2e.spec.ts | 37 ++++++++++++++++++- .../mdc-slider/slider.ts | 16 ++------ 3 files changed, 41 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: ` - + diff --git a/src/material-experimental/mdc-slider/slider.e2e.spec.ts b/src/material-experimental/mdc-slider/slider.e2e.spec.ts index 6ccc1384cb3a..5be79a6e3869 100644 --- a/src/material-experimental/mdc-slider/slider.e2e.spec.ts +++ b/src/material-experimental/mdc-slider/slider.e2e.spec.ts @@ -8,7 +8,7 @@ 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'; describe('MDC-based MatSlider', () => { const getStandardSlider = () => element(by.id('standard-slider')); @@ -32,6 +32,33 @@ 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({ + message: jasmine.stringMatching( + 'Unable to preventDefault inside passive event listener invocation.', + ), + }), + ); + }); }); describe('disabled slider', async () => { @@ -96,6 +123,14 @@ 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 { + const value = await getSliderValue(slider, thumbPosition); + 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 { 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 => { From e62589288e32fedafdcef1095bb234ca4cb83d8e Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Tue, 12 Apr 2022 19:37:41 +0000 Subject: [PATCH 2/4] fixup! fix(material-experimental/mdc-slider): remove pointerdown passive event listener options --- src/material-experimental/mdc-slider/slider.e2e.spec.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/material-experimental/mdc-slider/slider.e2e.spec.ts b/src/material-experimental/mdc-slider/slider.e2e.spec.ts index 5be79a6e3869..7ae30f6c9faa 100644 --- a/src/material-experimental/mdc-slider/slider.e2e.spec.ts +++ b/src/material-experimental/mdc-slider/slider.e2e.spec.ts @@ -125,7 +125,6 @@ async function getSliderValue(slider: ElementFinder, thumbPosition: Thumb): Prom /** Focuses on the MatSlider at the coordinates corresponding to the given thumb. */ async function focusSliderThumb(slider: ElementFinder, thumbPosition: Thumb): Promise { - const value = await getSliderValue(slider, thumbPosition); const webElement = await getElement(slider).getWebElement(); const coords = await getCoordsForValue(slider, await getSliderValue(slider, thumbPosition)); return await browser.actions().mouseMove(webElement, coords).mouseDown().perform(); From f09cb59704366111aec40bff9e038a65d1a03248 Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Wed, 13 Apr 2022 14:18:35 +0000 Subject: [PATCH 3/4] fixup! fix(material-experimental/mdc-slider): remove pointerdown passive event listener options --- src/material-experimental/mdc-slider/slider.e2e.spec.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/material-experimental/mdc-slider/slider.e2e.spec.ts b/src/material-experimental/mdc-slider/slider.e2e.spec.ts index 7ae30f6c9faa..a4affe319929 100644 --- a/src/material-experimental/mdc-slider/slider.e2e.spec.ts +++ b/src/material-experimental/mdc-slider/slider.e2e.spec.ts @@ -9,6 +9,7 @@ import {clickElementAtPoint, getElement, Point} from '../../cdk/testing/private/e2e'; import {Thumb} from '@material/slider'; import {$, browser, by, element, ElementFinder} from 'protractor'; +import {logging} from 'selenium-webdriver'; describe('MDC-based MatSlider', () => { const getStandardSlider = () => element(by.id('standard-slider')); @@ -53,6 +54,7 @@ describe('MDC-based MatSlider', () => { expect(await browser.manage().logs().get('browser')).not.toContain( jasmine.objectContaining({ + level: logging.Level.SEVERE, message: jasmine.stringMatching( 'Unable to preventDefault inside passive event listener invocation.', ), From 38cc47d7d344c17d32e7382ed8e239362705f6a4 Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Wed, 13 Apr 2022 14:22:02 +0000 Subject: [PATCH 4/4] fixup! fix(material-experimental/mdc-slider): remove pointerdown passive event listener options --- src/material-experimental/mdc-slider/slider.e2e.spec.ts | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/material-experimental/mdc-slider/slider.e2e.spec.ts b/src/material-experimental/mdc-slider/slider.e2e.spec.ts index a4affe319929..757d67b84fde 100644 --- a/src/material-experimental/mdc-slider/slider.e2e.spec.ts +++ b/src/material-experimental/mdc-slider/slider.e2e.spec.ts @@ -53,12 +53,7 @@ describe('MDC-based MatSlider', () => { await setValueByClick(slider, 15); expect(await browser.manage().logs().get('browser')).not.toContain( - jasmine.objectContaining({ - level: logging.Level.SEVERE, - message: jasmine.stringMatching( - 'Unable to preventDefault inside passive event listener invocation.', - ), - }), + jasmine.objectContaining({level: logging.Level.SEVERE}), ); }); });