diff --git a/packages/react/src/components/NumberInput/NumberInput.tsx b/packages/react/src/components/NumberInput/NumberInput.tsx index ba4772fba572..8ac7e8e71ec3 100644 --- a/packages/react/src/components/NumberInput/NumberInput.tsx +++ b/packages/react/src/components/NumberInput/NumberInput.tsx @@ -345,15 +345,23 @@ const NumberInput = React.forwardRef( 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 index 502ba605eae8..9462a387664f 100644 --- 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( + + ); + 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( + + ); + + 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();