diff --git a/packages/components/src/number-control/README.md b/packages/components/src/number-control/README.md index b233502f92f6a1..0d8f8d48a133c8 100644 --- a/packages/components/src/number-control/README.md +++ b/packages/components/src/number-control/README.md @@ -27,6 +27,14 @@ const Example = () => { ## Props +### allowEmpty + +If true, allows an empty string as a valid value. + +- Type: `Boolean` +- Required: No +- Default: `false` + ### dragDirection Determines the drag axis to increment/decrement the value. diff --git a/packages/components/src/number-control/index.js b/packages/components/src/number-control/index.js index 86cbe0dca6b2de..c52ebb1931f80b 100644 --- a/packages/components/src/number-control/index.js +++ b/packages/components/src/number-control/index.js @@ -29,6 +29,7 @@ export function NumberControl( hideHTMLArrows = false, isDragEnabled = true, isShiftStepEnabled = true, + allowEmpty = false, label, max = Infinity, min = -Infinity, @@ -155,7 +156,11 @@ export function NumberControl( type === inputControlActionTypes.PRESS_ENTER || type === inputControlActionTypes.COMMIT ) { - state.value = roundClamp( currentValue, min, max, step ); + const applyEmptyValue = allowEmpty && currentValue === ''; + + state.value = applyEmptyValue + ? currentValue + : roundClamp( currentValue, min, max, step ); } return state; diff --git a/packages/components/src/number-control/test/index.js b/packages/components/src/number-control/test/index.js index 883b7f6d9591fd..d2b799554ff888 100644 --- a/packages/components/src/number-control/test/index.js +++ b/packages/components/src/number-control/test/index.js @@ -92,6 +92,17 @@ describe( 'NumberControl', () => { expect( input.value ).toBe( '0' ); } ); + + it( 'should accept empty string on ENTER keypress', () => { + render( ); + + const input = getInput(); + input.focus(); + fireEvent.change( input, { target: { value: '' } } ); + fireKeyDown( { keyCode: ENTER } ); + + expect( input.value ).toBe( '' ); + } ); } ); describe( 'Key UP interactions', () => {