Merge pull request #14056 from IgniteUI/ganastasov/fix-13999-master

fix(slider): correct behavior of igx-slider in synchronized two-way binding - master

Author: kdinev

projects/igniteui-angular/src/lib/slider/slider.component.spec.ts

@@ -330,6 +330,61 @@ describe('IgxSlider', () => {
             fixture.detectChanges();
             expect(Math.round(slider.value as number)).toBe(60);
         });
+
+        it('should not set value if value is nullish but not zero', () => {
+            spyOn(slider as any, 'isNullishButNotZero').and.returnValue(true);
+            const setValueSpy = spyOn(slider, 'setValue');
+            const positionHandlersAndUpdateTrackSpy = spyOn(slider as any, 'positionHandlersAndUpdateTrack');
+
+            slider.writeValue(null);
+            fixture.detectChanges();
+
+            expect(setValueSpy).not.toHaveBeenCalled();
+            expect(positionHandlersAndUpdateTrackSpy).not.toHaveBeenCalled();
+
+            slider.writeValue(undefined);
+            fixture.detectChanges();
+
+            expect(setValueSpy).not.toHaveBeenCalled();
+            expect(positionHandlersAndUpdateTrackSpy).not.toHaveBeenCalled();
+        });
+
+        it('should set value and update track when value is not nullish and not zero', () => {
+            spyOn(slider as any, 'isNullishButNotZero').and.returnValue(false);
+            const setValueSpy = spyOn(slider, 'setValue');
+            const positionHandlersAndUpdateTrackSpy = spyOn(slider as any, 'positionHandlersAndUpdateTrack');
+
+            const value = 10;
+            slider.writeValue(value);
+            fixture.detectChanges();
+
+            expect(setValueSpy).toHaveBeenCalledWith(value, false);
+            expect(positionHandlersAndUpdateTrackSpy).toHaveBeenCalled();
+        });
+
+        it('should normalize value by step', () => {
+            spyOn(slider as any, 'isNullishButNotZero').and.returnValue(false);
+            const normalizeByStepSpy = spyOn(slider as any, 'normalizeByStep');
+
+            const value = 10;
+            slider.writeValue(value);
+            fixture.detectChanges();
+
+            expect(normalizeByStepSpy).toHaveBeenCalledWith(value);
+        });
+
+        it('should return true if value is null or undefined', () => {
+            expect((slider as any).isNullishButNotZero(null)).toBe(true);
+            expect((slider as any).isNullishButNotZero(undefined)).toBe(true);
+        });
+
+        it('should return false if value is zero', () => {
+            expect((slider as any).isNullishButNotZero(0)).toBe(false);
+        });
+
+        it('should return false if value is not nullish and not zero', () => {
+            expect((slider as any).isNullishButNotZero(10)).toBe(false);
+        });
     });
 
     describe('Slider: with set min and max value', () => {

projects/igniteui-angular/src/lib/slider/slider.component.ts

@@ -1072,7 +1072,7 @@ export class IgxSliderComponent implements
      * @hidden
      */
     public writeValue(value: IRangeSliderValue | number): void {
-        if (!value) {
+        if (this.isNullishButNotZero(value)) {
             return;
         }
 
@@ -1374,6 +1374,10 @@ export class IgxSliderComponent implements
         return this.valueInRange((value - this.minValue) / (this.maxValue - this.minValue), pMin, pMax);
     }
 
+    private isNullishButNotZero(value: any): boolean {
+        return !value && value !== 0;
+    }
+
     /**
      * @hidden
      * Normalizе the value when two-way data bind is used and {@link this.step} is set.