fix: enable keyboard interactions after cliking on thumb (#33922)

Author: marchbox

change/@fluentui-web-components-e9ccc14b-1620-41ad-a9bd-4732e6409007.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: enable keyboard interactions after clicking on thumb",
+  "packageName": "@fluentui/web-components",
+  "email": "machi@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/web-components/docs/web-components.api.md

@@ -3521,16 +3521,16 @@ export class Slider extends FASTElement implements SliderConfiguration {
     // (undocumented)
     handleChange(_: any, propertyName: string): void;
     // (undocumented)
-    handlePointerDown: (event: PointerEvent | null) => void;
-    handleThumbPointerDown: (event: PointerEvent | null) => void;
+    handleKeydown(event: KeyboardEvent): boolean;
+    // (undocumented)
+    handlePointerDown: (event: PointerEvent | null) => boolean;
+    handleThumbPointerDown: (event: PointerEvent | null) => boolean;
     increment(): void;
     initialValue: string;
     // @internal
     protected initialValueChanged(_: string, next: string): void;
     // @internal (undocumented)
     isDragging: boolean;
-    // (undocumented)
-    keypressHandler: (event: KeyboardEvent) => void;
     get labels(): ReadonlyArray<Node>;
     max: string;
     // (undocumented)

packages/web-components/src/slider/slider.spec.ts

@@ -712,4 +712,18 @@ test.describe('Slider', () => {
       expect(thumbBox.y + thumbBox.height / 2).toBeCloseTo(thumbMoveToY);
     });
   });
+
+  test('should allow keyboard interactions after clicking on the thumb', async ({ fastPage, page }) => {
+    const { element } = fastPage;
+    const thumb = element.locator('.thumb-container');
+
+    await expect(element).toHaveJSProperty('valueAsNumber', 50);
+
+    await thumb.click();
+    await page.keyboard.press('ArrowRight');
+    await page.keyboard.press('ArrowRight', { delay: 10 });
+    await page.keyboard.press('ArrowRight', { delay: 10 });
+
+    await expect(element).toHaveJSProperty('valueAsNumber', 53);
+  });
 });

packages/web-components/src/slider/slider.template.ts

@@ -9,6 +9,7 @@ export function sliderTemplate<T extends Slider>(options: SliderOptions = {}): E
     <template
       tabindex="${x => (x.disabled ? null : 0)}"
       @pointerdown="${(x, c) => x.handlePointerDown(c.event as PointerEvent)}"
+      @keydown="${(x, c) => x.handleKeydown(c.event as KeyboardEvent)}"
     >
       <div ${ref('track')} part="track-container" class="track" style="${x => x.position}"></div>
       <div

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

@@ -537,7 +537,6 @@ export class Slider extends FASTElement implements SliderConfiguration {
     this.setDisabledSideEffect(this.disabled);
     this.updateStepMultiplier();
     this.setupTrackConstraints();
-    this.setupListeners();
     this.setupDefaultValue();
     this.setSliderPosition();
 
@@ -554,8 +553,6 @@ export class Slider extends FASTElement implements SliderConfiguration {
   public disconnectedCallback(): void {
     super.disconnectedCallback();
 
-    this.setupListeners(true);
-
     Observable.getNotifier(this).unsubscribe(this, 'max');
     Observable.getNotifier(this).unsubscribe(this, 'min');
     Observable.getNotifier(this).unsubscribe(this, 'step');
@@ -593,9 +590,9 @@ export class Slider extends FASTElement implements SliderConfiguration {
     this.value = decrementedValString;
   }
 
-  public keypressHandler = (event: KeyboardEvent): void => {
+  public handleKeydown(event: KeyboardEvent): boolean {
     if (this.disabled) {
-      return;
+      return true;
     }
 
     switch (event.key) {
@@ -628,7 +625,9 @@ export class Slider extends FASTElement implements SliderConfiguration {
         }
         break;
     }
-  };
+
+    return true;
+  }
 
   /**
    * Places the thumb based on the current value
@@ -666,15 +665,6 @@ export class Slider extends FASTElement implements SliderConfiguration {
     }
   };
 
-  private setupListeners = (remove: boolean = false): void => {
-    //TODO Bug: https://github.com/microsoft/fluentui/issues/30087
-    this.addEventListener('keydown', this.keypressHandler);
-
-    if (remove) {
-      this.removeEventListener('keydown', this.keypressHandler);
-    }
-  };
-
   private get midpoint(): string {
     return `${this.convertToConstrainedValue((this.maxAsNumber + this.minAsNumber) / 2)}`;
   }
@@ -698,13 +688,14 @@ export class Slider extends FASTElement implements SliderConfiguration {
    *  Handle mouse moves during a thumb drag operation
    *  If the event handler is null it removes the events
    */
-  public handleThumbPointerDown = (event: PointerEvent | null): void => {
+  public handleThumbPointerDown = (event: PointerEvent | null): boolean => {
     const windowFn = event !== null ? window.addEventListener : window.removeEventListener;
     windowFn('pointerup', this.handleWindowPointerUp);
     windowFn('pointermove', this.handlePointerMove, { passive: true });
     windowFn('touchmove', this.handlePointerMove, { passive: true });
     windowFn('touchend', this.handleWindowPointerUp);
     this.isDragging = event !== null;
+    return true;
   };
 
   /**
@@ -787,6 +778,7 @@ export class Slider extends FASTElement implements SliderConfiguration {
         this.value = `${this.calculateNewValue(controlValue)}`;
       }
     }
+    return true;
   };
 
   private convertToConstrainedValue(value: number): number {