fix: sliders mouseup is not firing when leaving the window

change/@microsoft-fast-foundation-edc9b322-97d0-4fcd-b4fd-0c6dd4849f1c.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: sliders mouseup is not firing when leaving the window",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "robarb@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.spec.ts

@@ -271,7 +271,7 @@ describe("HorinzontalScroll", () => {
                 await disconnect();
             }, 1);
         });
-        
+
         it("should change scroll stop on resize", async () => {
             const { element, connect, disconnect } = await setup();
 

packages/web-components/fast-foundation/src/slider/slider.ts

@@ -251,10 +251,9 @@ export class Slider extends FormAssociatedSlider implements SliderConfiguration
      * @internal
      */
     public disconnectedCallback(): void {
-        this.removeEventListener("keydown", this.keypressHandler);
-        this.removeEventListener("mousedown", this.handleMouseDown);
-        this.thumb.removeEventListener("mousedown", this.handleThumbMouseDown);
-        this.thumb.removeEventListener("touchstart", this.handleThumbMouseDown);
+        this.setupListeners(true);
+        this.handleThumbMouseDown(null, true);
+        this.handleMouseDown(null, true);
     }
 
     /**
@@ -361,11 +360,12 @@ export class Slider extends FormAssociatedSlider implements SliderConfiguration
         }
     };
 
-    private setupListeners = (): void => {
-        this.addEventListener("keydown", this.keypressHandler);
-        this.addEventListener("mousedown", this.handleMouseDown);
-        this.thumb.addEventListener("mousedown", this.handleThumbMouseDown);
-        this.thumb.addEventListener("touchstart", this.handleThumbMouseDown);
+    private setupListeners = (remove: boolean = false): void => {
+        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);
     };
 
     /**
@@ -394,17 +394,23 @@ export class Slider extends FormAssociatedSlider implements SliderConfiguration
     /**
      *  Handle mouse moves during a thumb drag operation
      */
-    private handleThumbMouseDown = (event: MouseEvent): void => {
-        if (this.readOnly || this.disabled || event.defaultPrevented) {
+    private handleThumbMouseDown = (
+        event: MouseEvent | null,
+        remove: boolean = false
+    ): void => {
+        if (this.readOnly || this.disabled || (event && event.defaultPrevented)) {
             return;
         }
-        event.preventDefault();
-        (event.target as HTMLElement).focus();
-        window.addEventListener("mouseup", this.handleWindowMouseUp);
-        window.addEventListener("mousemove", this.handleMouseMove);
-        window.addEventListener("touchmove", this.handleMouseMove);
-        window.addEventListener("touchend", this.handleWindowMouseUp);
-        this.isDragging = true;
+        if (event) {
+            event.preventDefault();
+            (event.target as HTMLElement).focus();
+        }
+        const eventAction = `${remove ? "remove" : "add"}EventListener`;
+        window[eventAction]("mouseup", this.handleWindowMouseUp);
+        window[eventAction]("mousemove", this.handleMouseMove);
+        window[eventAction]("touchmove", this.handleMouseMove);
+        window[eventAction]("touchend", this.handleWindowMouseUp);
+        this.isDragging = remove === false;
     };
 
     /**
@@ -453,26 +459,30 @@ export class Slider extends FormAssociatedSlider implements SliderConfiguration
 
     private stopDragging = (): void => {
         this.isDragging = false;
-        window.removeEventListener("mouseup", this.handleWindowMouseUp);
-        window.removeEventListener("mousemove", this.handleMouseMove);
-        window.removeEventListener("touchmove", this.handleMouseMove);
-        window.removeEventListener("touchend", this.handleWindowMouseUp);
+        this.handleMouseDown(null, true);
+        this.handleThumbMouseDown(null, true);
     };
 
-    private handleMouseDown = (e: MouseEvent) => {
-        e.preventDefault();
+    private handleMouseDown = (e: MouseEvent | null, remove: boolean = false) => {
+        if (e) {
+            e.preventDefault();
+        }
         if (!this.disabled && !this.readOnly) {
-            this.setupTrackConstraints();
-            (e.target as HTMLElement).focus();
-            window.addEventListener("mouseup", this.handleWindowMouseUp);
-            window.addEventListener("mousemove", this.handleMouseMove);
-
-            const controlValue: number =
-                this.orientation === Orientation.horizontal
-                    ? e.pageX - document.documentElement.scrollLeft - this.trackLeft
-                    : e.pageY - document.documentElement.scrollTop;
-
-            this.value = `${this.calculateNewValue(controlValue)}`;
+            const eventAction = `${remove ? "remove" : "add"}EventListener`;
+            window[eventAction]("mouseup", this.handleWindowMouseUp);
+            window.document[eventAction]("mouseleave", this.handleWindowMouseUp);
+            window[eventAction]("mousemove", this.handleMouseMove);
+
+            if (e) {
+                this.setupTrackConstraints();
+                (e.target as HTMLElement).focus();
+                const controlValue: number =
+                    this.orientation === Orientation.horizontal
+                        ? e.pageX - document.documentElement.scrollLeft - this.trackLeft
+                        : e.pageY - document.documentElement.scrollTop;
+
+                this.value = `${this.calculateNewValue(controlValue)}`;
+            }
         }
     };