fix(slider): mobile sliding regression

fixes #5894 Forgot to disable touch-action in the previous change. When dragging the slider, the browser believes it is instead a scroll or touchmove rather than an intended pointermove. `touch-action: none` disables this. PiperOrigin-RevId: 310629089

Author: Elliott Marquez

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;
 

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

packages/mdc-slider/foundation.ts

@@ -160,6 +160,16 @@ export class MDCSliderFoundation extends MDCFoundation<MDCSliderAdapter> {
  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_);

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();