fix(slider): don't change value when slider is display:none; #INFR-10…

…717 @wangkai (#2937) * fix(slider): don't change value when slider is display:none; #INFR-10717 * test(slider): add test
atinc · Dec 5, 2023 · ff249f1 · ff249f1
1 parent dd32e06
commit ff249f1
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git a/src/slider/slider.component.ts b/src/slider/slider.component.ts
@@ -339,6 +339,9 @@ export class ThySliderComponent
     private mousePositionToAdaptiveValue(position: number): number {
         const sliderStartPosition = this.getSliderPagePosition();
         const sliderLength = this.getRailLength();
+        if (!sliderLength) {
+            return this.value;
+        }
         const ratio = this.convertPointerPositionToRatio(position, sliderStartPosition, sliderLength);
         const value = this.ratioToValue(ratio);
         return parseFloat(value.toFixed(this.getDecimals(this.thyStep)));

diff --git a/src/slider/slider.spec.ts b/src/slider/slider.spec.ts
@@ -2,7 +2,7 @@ import { FormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { ThySliderModule } from './slider.module';
 import { dispatchMouseEvent } from 'ngx-tethys/testing';
-import { Component, DebugElement } from '@angular/core';
+import { Component, DebugElement, ViewEncapsulation } from '@angular/core';
 import { ComponentFixture, TestBed, fakeAsync } from '@angular/core/testing';
 
 @Component({
@@ -21,9 +21,11 @@ import { ComponentFixture, TestBed, fakeAsync } from '@angular/core/testing';
                 (thyAfterChange)="afterChange($event)"></thy-slider>
         </div>
     `,
+    encapsulation: ViewEncapsulation.None,
     styles: [
         `
-            .test-slider-container {
+            .thy-slider-rail {
+                display: inline-block;
                 width: 500px;
                 height: 200px;
             }
@@ -115,6 +117,20 @@ describe('ThyTestSliderComponent', () => {
             }).toThrowError('(max - min) must be divisible by step.');
         }));
 
+        it('should not change value when slider is hidden', fakeAsync(() => {
+            fixture.detectChanges();
+            const sliderElement = getSliderElement();
+            const pointerElement = getSliderPointerElement();
+            const pointerElementRect = pointerElement.getBoundingClientRect();
+            dispatchMouseEvent(pointerElement, 'mousedown', pointerElementRect.left + 10);
+            const value = fixtureInstance.value;
+
+            sliderElement.style.display = 'none';
+            fixture.detectChanges();
+            dispatchMouseEvent(pointerElement, 'mousemove', pointerElementRect.left + 50, pointerElementRect.height);
+            expect(fixtureInstance.value).toBe(value);
+        }));
+
         it('min/max value will be right', fakeAsync(() => {
             const minValue = 50;
             const maxValue = 200;