fix(material/slider): first keypress ignored if out-of-bounds value i…

…s assigned (#23827)

We allow for an out-of-bounds value to be assigned to a `mat-slider` programmatically, however our key press logic didn't account for it. This meant that it might appear as if the first key press is ignored if such a value is assigned by the user.

Fixes #23817.

(cherry picked from commit aa32621)

src/material/slider/slider.spec.ts

@@ -962,6 +962,7 @@ describe('MatSlider', () => {
     let sliderNativeElement: HTMLElement;
     let testComponent: SliderWithChangeHandler;
     let sliderInstance: MatSlider;
+    let trackFillElement: HTMLElement;
 
     beforeEach(() => {
       fixture = createComponent(SliderWithChangeHandler);
@@ -974,6 +975,7 @@ describe('MatSlider', () => {
       sliderDebugElement = fixture.debugElement.query(By.directive(MatSlider))!;
       sliderNativeElement = sliderDebugElement.nativeElement;
       sliderInstance = sliderDebugElement.injector.get<MatSlider>(MatSlider);
+      trackFillElement = sliderNativeElement.querySelector('.mat-slider-track-fill') as HTMLElement;
     });
 
     it('should increment slider by 1 on up arrow pressed', () => {
@@ -1028,6 +1030,21 @@ describe('MatSlider', () => {
       expect(sliderInstance.value).toBe(99);
     });
 
+    it('should decrement from max when interacting after out-of-bounds value is assigned', () => {
+      sliderInstance.max = 100;
+      sliderInstance.value = 200;
+      fixture.detectChanges();
+
+      expect(sliderInstance.value).toBe(200);
+      expect(trackFillElement.style.transform).toContain('scale3d(1, 1, 1)');
+
+      dispatchKeyboardEvent(sliderNativeElement, 'keydown', LEFT_ARROW);
+      fixture.detectChanges();
+
+      expect(sliderInstance.value).toBe(99);
+      expect(trackFillElement.style.transform).toContain('scale3d(0.99, 1, 1)');
+    });
+
     it('should increment slider by 10 on page up pressed', () => {
       expect(testComponent.onChange).not.toHaveBeenCalled();
 

src/material/slider/slider.ts

@@ -793,7 +793,10 @@ export class MatSlider
 
   /** Increments the slider by the given number of steps (negative number decrements). */
   private _increment(numSteps: number) {
-    this.value = this._clamp((this.value || 0) + this.step * numSteps, this.min, this.max);
+    // Pre-clamp the current value since it's allowed to be
+    // out of bounds when assigned programmatically.
+    const clampedValue = this._clamp(this.value || 0, this.min, this.max);
+    this.value = this._clamp(clampedValue + this.step * numSteps, this.min, this.max);
   }
 
   /** Calculate the new value from the new physical location. The value will always be snapped. */