fix(numberfield): fix wrong value after input and spin button click

Author: arturbien

src/NumberField/NumberField.js

@@ -110,11 +110,12 @@ const NumberField = React.forwardRef(function NumberField(props, ref) {
   };
 
   const handleClick = val => {
+    const stateValue = parseFloat(valueDerived);
     const newValue = clamp(
-      +parseFloat(valueDerived + val).toFixed(2),
+      +parseFloat(stateValue + val).toFixed(2),
       min,
       max
-    );
+    ).toString();
 
     setValueState(newValue);
 

src/NumberField/NumberField.spec.js

@@ -15,7 +15,7 @@ describe('<NumberField />', () => {
     const spinButton = getByTestId('increment');
     spinButton.click();
     expect(handleChange).toHaveBeenCalledTimes(1);
-    expect(handleChange).toHaveBeenCalledWith(3);
+    expect(handleChange).toHaveBeenCalledWith('3');
   });
 
   it('should call onChange on blur after keyboard input', () => {
@@ -52,6 +52,20 @@ describe('<NumberField />', () => {
     expect(handleChange).toHaveBeenCalledTimes(1);
   });
 
+  it('should give correct result after user changes input value and then clicks increment button', () => {
+    const handleChange = jest.fn();
+    const { container, getByTestId } = renderWithTheme(
+      <NumberField onChange={handleChange} defaultValue={0} />
+    );
+    const input = container.querySelector('input');
+    const incrementButton = getByTestId('increment');
+
+    fireEvent.change(input, { target: { value: 2 } });
+    incrementButton.click();
+
+    expect(handleChange).toHaveBeenCalledWith('3');
+  });
+
   it('should reach max value', () => {
     const { getByTestId, container } = renderWithTheme(
       <NumberField defaultValue={90} min={0} max={100} step={10} />

src/NumberField/NumberField.stories.js

@@ -28,7 +28,7 @@ export default {
 
 export const Default = () => (
   <>
-    <NumberField defaultValue={1.5} min={0} max={9} width={130} />
+    <NumberField defaultValue={3} step={1.5} min={1.5} max={9} width={130} />
     <br />
     <NumberField defaultValue={1995} width={130} />
     <br />