fix(16865): fixes step operations in NumberInput (#17048)

carbon-design-system · Aug 14, 2024 · 3788b98 · 3788b98
1 parent 6686fc3
commit 3788b98
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 8 deletions.
diff --git a/packages/react/src/components/NumberInput/NumberInput.tsx b/packages/react/src/components/NumberInput/NumberInput.tsx
@@ -345,15 +345,23 @@ const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
 
     function handleStepperClick(event, direction) {
       if (inputRef.current) {
-        direction === 'up'
-          ? inputRef.current.stepUp()
-          : inputRef.current.stepDown();
-
+        const currentValue = Number(inputRef.current.value);
+        let newValue =
+          direction === 'up' ? currentValue + step : currentValue - step;
+        if (min !== undefined) {
+          newValue = Math.max(newValue, min);
+        }
+        if (max !== undefined) {
+          newValue = Math.min(newValue, max);
+        }
+        const currentInputValue = inputRef.current
+          ? inputRef.current.value
+          : '';
         const state = {
           value:
-            allowEmpty && inputRef.current.value === ''
+            allowEmpty && currentInputValue === '' && step === 0
               ? ''
-              : Number(inputRef.current.value),
+              : newValue,
           direction: direction,
         };
         setValue(state.value);

diff --git a/packages/react/src/components/NumberInput/__tests__/NumberInput-test.js b/packages/react/src/components/NumberInput/__tests__/NumberInput-test.js
@@ -332,13 +332,45 @@ describe('NumberInput', () => {
           translateWithId={translateWithId}
         />
       );
-
       expect(screen.getByLabelText('test-label')).toHaveValue(5);
-
       await userEvent.click(screen.getByLabelText('decrement'));
       expect(screen.getByLabelText('test-label')).toHaveValue(0);
     });
   });
+  it('should increase by the value of large step', async () => {
+    render(
+      <NumberInput
+        label="test-label"
+        id="test"
+        min={-9999}
+        value={1000}
+        max={10000}
+        step={1000}
+        translateWithId={translateWithId}
+      />
+    );
+    expect(screen.getByLabelText('test-label')).toHaveValue(1000);
+    await userEvent.click(screen.getByLabelText('increment'));
+    expect(screen.getByLabelText('test-label')).toHaveValue(2000);
+  });
+  it('should decrease by the value of large step', async () => {
+    render(
+      <NumberInput
+        label="test-label"
+        id="test"
+        min={-9999}
+        value={1000}
+        max={10000}
+        step={1000}
+        translateWithId={translateWithId}
+      />
+    );
+
+    expect(screen.getByLabelText('test-label')).toHaveValue(1000);
+
+    await userEvent.click(screen.getByLabelText('decrement'));
+    expect(screen.getByLabelText('test-label')).toHaveValue(0);
+  });
 
   it('should respect readOnly prop', async () => {
     const onChange = jest.fn();