Merge pull request #1265 from dxc-technology/jcheng-fix-slider-accept-zero

[Patch] fix Slider to accept zero

Author: raquelarrojo

lib/src/slider/Slider.test.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { render, fireEvent, act } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 import DxcSlider from "./Slider";
 
 describe("Slider component tests", () => {
@@ -81,4 +82,15 @@ describe("Slider component tests", () => {
     expect(getByText("100$")).toBeTruthy();
     expect(labelFormatCallback).toHaveBeenCalledTimes(2);
   });
+  test("Change value correctly to 0 from external function", () => {
+    const onChange = jest.fn();
+    const { rerender, getByRole } = render(
+      <DxcSlider minValue={0} maxValue={100} onChange={onChange} showLimitsValues value={13} showInput />
+    );
+    const slider = getByRole("slider");
+    userEvent.tab();
+    fireEvent.keyDown(slider, { key: "ArrowRight", code: "ArrowRight", keyCode: 39, charCode: 39 });
+    rerender(<DxcSlider minValue={0} maxValue={100} onChange={onChange} showLimitsValues value={0} showInput />);
+    expect(slider.getAttribute("aria-valuenow")).toBe("0");
+  });
 });

lib/src/slider/Slider.tsx

@@ -45,7 +45,7 @@ const DxcSlider = ({
   );
 
   const handlerSliderChange = (event, newValue) => {
-    const valueToCheck = value ?? innerValue;
+    const valueToCheck = value != null && value >= 0 ? value : innerValue;
     valueToCheck !== newValue && setInnerValue(newValue);
     onChange?.(newValue);
   };
@@ -80,7 +80,7 @@ const DxcSlider = ({
             </MinLabelContainer>
           )}
           <Slider
-            value={(value != null && value >= 0 && value) || innerValue}
+            value={value != null && value >= 0 ? value : innerValue}
             min={minValue}
             max={maxValue}
             onChange={handlerSliderChange}
@@ -99,7 +99,7 @@ const DxcSlider = ({
             <StyledTextInput>
               <DxcTextInput
                 name={name}
-                value={(value != null && value >= 0 && value.toString()) || innerValue.toString()}
+                value={value != null && value >= 0 ? value.toString() : innerValue.toString()}
                 disabled={disabled}
                 onChange={handlerInputChange}
                 size="fillParent"