diff --git a/packages/mdc-slider/_mixins.scss b/packages/mdc-slider/_mixins.scss index 13b949942bc..47a41f5d102 100644 --- a/packages/mdc-slider/_mixins.scss +++ b/packages/mdc-slider/_mixins.scss @@ -46,6 +46,12 @@ .mdc-slider { @include color-accessible(secondary, $query: $query); + &--disable-touch-action { + @include feature-targeting-mixins.targets($feat-structure) { + touch-action: none; + } + } + &--disabled { $disabled-color: #9a9a9a; diff --git a/packages/mdc-slider/constants.ts b/packages/mdc-slider/constants.ts index 0f67b65393b..556f1c6f3c7 100644 --- a/packages/mdc-slider/constants.ts +++ b/packages/mdc-slider/constants.ts @@ -29,6 +29,7 @@ const cssClasses = { HAS_TRACK_MARKER: 'mdc-slider--display-markers', IN_TRANSIT: 'mdc-slider--in-transit', IS_DISCRETE: 'mdc-slider--discrete', + DISABLE_TOUCH_ACTION: 'mdc-slider--disable-touch-action', }; const strings = { diff --git a/packages/mdc-slider/foundation.ts b/packages/mdc-slider/foundation.ts index 706d32aba71..718682730f8 100644 --- a/packages/mdc-slider/foundation.ts +++ b/packages/mdc-slider/foundation.ts @@ -160,6 +160,16 @@ export class MDCSliderFoundation extends MDCFoundation { evtName, this.thumbContainerPointerHandler_); }); + if (hasPointerEventSupport) { + /* + * When pointermove happens, if too much sliding happens, the browser + * believes you are panning in the x direction and stops firing + * pointermove events and supplies its own gestures. (similar to + * preventing default on touchmove) + */ + this.adapter_.addClass(cssClasses.DISABLE_TOUCH_ACTION); + } + this.adapter_.registerInteractionHandler('keydown', this.keydownHandler_); this.adapter_.registerInteractionHandler('focus', this.focusHandler_); this.adapter_.registerInteractionHandler('blur', this.blurHandler_); diff --git a/packages/mdc-slider/test/foundation.test.ts b/packages/mdc-slider/test/foundation.test.ts index 07dc6ecf90c..7e3430b49bd 100644 --- a/packages/mdc-slider/test/foundation.test.ts +++ b/packages/mdc-slider/test/foundation.test.ts @@ -139,6 +139,23 @@ describe('MDCSliderFoundation', () => { .toHaveBeenCalledWith(isA(Function)); }); + it('#init disables touch action if pointerevents are supported', () => { + const {foundation, mockAdapter} = setupTest(); + + mockAdapter.computeBoundingRect.and.returnValue({width: 0, left: 0}); + foundation.init(); + + const hasPointer = !!window.PointerEvent; + + if (hasPointer) { + expect(mockAdapter.addClass) + .toHaveBeenCalledWith(cssClasses.DISABLE_TOUCH_ACTION); + } else { + expect(mockAdapter.addClass) + .not.toHaveBeenCalledWith(cssClasses.DISABLE_TOUCH_ACTION); + } + }); + it('#init checks if slider is discrete and if display track markers', () => { const {foundation, mockAdapter} = setupTest();