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

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