fix: slider touch handlers should be passive (microsoft#5692)

* passive handlers * Change files
whatitslike · Mar 4, 2022 · 0a25cee · 0a25cee
1 parent bdeeb23
commit 0a25cee
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/change/@microsoft-fast-foundation-da3618a4-2998-445b-b128-8a205fa7eeff.json b/change/@microsoft-fast-foundation-da3618a4-2998-445b-b128-8a205fa7eeff.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "passive handlers",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "scomea@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-foundation/src/slider/slider.ts b/packages/web-components/fast-foundation/src/slider/slider.ts
@@ -374,8 +374,12 @@ export class Slider extends FormAssociatedSlider implements SliderConfiguration
         const eventAction = `${remove ? "remove" : "add"}EventListener`;
         this[eventAction]("keydown", this.keypressHandler);
         this[eventAction]("mousedown", this.handleMouseDown);
-        this.thumb[eventAction]("mousedown", this.handleThumbMouseDown);
-        this.thumb[eventAction]("touchstart", this.handleThumbMouseDown);
+        this.thumb[eventAction]("mousedown", this.handleThumbMouseDown, {
+            passive: true,
+        });
+        this.thumb[eventAction]("touchstart", this.handleThumbMouseDown, {
+            passive: true,
+        });
         // removes handlers attached by mousedown handlers
         if (remove) {
             this.handleMouseDown(null);
@@ -415,13 +419,12 @@ export class Slider extends FormAssociatedSlider implements SliderConfiguration
             if (this.readOnly || this.disabled || event.defaultPrevented) {
                 return;
             }
-            event.preventDefault();
             (event.target as HTMLElement).focus();
         }
         const eventAction = `${event !== null ? "add" : "remove"}EventListener`;
         window[eventAction]("mouseup", this.handleWindowMouseUp);
-        window[eventAction]("mousemove", this.handleMouseMove);
-        window[eventAction]("touchmove", this.handleMouseMove);
+        window[eventAction]("mousemove", this.handleMouseMove, { passive: true });
+        window[eventAction]("touchmove", this.handleMouseMove, { passive: true });
         window[eventAction]("touchend", this.handleWindowMouseUp);
         this.isDragging = event !== null;
     };