diff --git a/packages/react-core/src/components/NumberInput/NumberInput.tsx b/packages/react-core/src/components/NumberInput/NumberInput.tsx index d4d3ed43954..eea81b7e180 100644 --- a/packages/react-core/src/components/NumberInput/NumberInput.tsx +++ b/packages/react-core/src/components/NumberInput/NumberInput.tsx @@ -51,6 +51,8 @@ export interface NumberInputProps extends React.HTMLProps { minusBtnProps?: ButtonProps; /** Additional properties added to the plus button */ plusBtnProps?: ButtonProps; + /** Allow the user to clear out the input to an empty string (recommended) */ + allowEmptyInput?: boolean; } type DefaultKeyDownHandlerArgs = Pick; @@ -87,8 +89,12 @@ export const NumberInput: React.FunctionComponent = ({ inputProps, minusBtnProps, plusBtnProps, + allowEmptyInput = false, ...props }: NumberInputProps) => { + if (!allowEmptyInput) { + value = value || 0; + } const numberInputUnit =
{unit}
; const keyDownHandler = inputProps && inputProps.onKeyDown ? inputProps.onKeyDown : defaultKeyDownHandler({ inputName, onMinus, onPlus }); diff --git a/packages/react-core/src/components/NumberInput/__tests__/NumberInput.test.tsx b/packages/react-core/src/components/NumberInput/__tests__/NumberInput.test.tsx index c2bc167c1f4..fc7370d9458 100644 --- a/packages/react-core/src/components/NumberInput/__tests__/NumberInput.test.tsx +++ b/packages/react-core/src/components/NumberInput/__tests__/NumberInput.test.tsx @@ -207,9 +207,15 @@ describe('numberInput', () => { expect(input).toHaveDisplayValue('0'); }); - test('renders nothing if null value passed', () => { + test('renders 0 if null value passed without allow empty', () => { render(); const input = screen.getByRole('spinbutton'); + expect(input).toHaveDisplayValue('0'); + }); + + test('renders nothing if null value passed with allow empty', () => { + render(); + const input = screen.getByRole('spinbutton'); expect(input).toHaveDisplayValue(''); }); diff --git a/packages/react-core/src/components/NumberInput/examples/NumberInputCustomStep.tsx b/packages/react-core/src/components/NumberInput/examples/NumberInputCustomStep.tsx index c63f02b754b..47b47c281f7 100644 --- a/packages/react-core/src/components/NumberInput/examples/NumberInputCustomStep.tsx +++ b/packages/react-core/src/components/NumberInput/examples/NumberInputCustomStep.tsx @@ -24,6 +24,7 @@ export const NumberInputCustomStep: React.FunctionComponent = () => { inputAriaLabel="number input" minusBtnAriaLabel="minus" plusBtnAriaLabel="plus" + allowEmptyInput /> ); }; diff --git a/packages/react-core/src/components/NumberInput/examples/NumberInputCustomStepAndThreshold.tsx b/packages/react-core/src/components/NumberInput/examples/NumberInputCustomStepAndThreshold.tsx index f410c255616..b4fe60a4c2a 100644 --- a/packages/react-core/src/components/NumberInput/examples/NumberInputCustomStepAndThreshold.tsx +++ b/packages/react-core/src/components/NumberInput/examples/NumberInputCustomStepAndThreshold.tsx @@ -46,6 +46,7 @@ export const NumberInputCustomStepAndThreshold: React.FunctionComponent = () => inputAriaLabel="number input" minusBtnAriaLabel="minus" plusBtnAriaLabel="plus" + allowEmptyInput /> ); }; diff --git a/packages/react-core/src/components/NumberInput/examples/NumberInputDefault.tsx b/packages/react-core/src/components/NumberInput/examples/NumberInputDefault.tsx index 4f86471db04..b229401c0db 100644 --- a/packages/react-core/src/components/NumberInput/examples/NumberInputDefault.tsx +++ b/packages/react-core/src/components/NumberInput/examples/NumberInputDefault.tsx @@ -29,6 +29,7 @@ export const NumberInputDefault: React.FunctionComponent = () => { inputAriaLabel="number input" minusBtnAriaLabel="minus" plusBtnAriaLabel="plus" + allowEmptyInput /> ); }; diff --git a/packages/react-core/src/components/NumberInput/examples/NumberInputDisabled.tsx b/packages/react-core/src/components/NumberInput/examples/NumberInputDisabled.tsx index 5f182ac00df..30de6258745 100644 --- a/packages/react-core/src/components/NumberInput/examples/NumberInputDisabled.tsx +++ b/packages/react-core/src/components/NumberInput/examples/NumberInputDisabled.tsx @@ -35,6 +35,7 @@ export const NumberInputDisabled: React.FunctionComponent = () => { plusBtnAriaLabel="plus" unit="%" isDisabled + allowEmptyInput /> ); }; diff --git a/packages/react-core/src/components/NumberInput/examples/NumberInputUnit.tsx b/packages/react-core/src/components/NumberInput/examples/NumberInputUnit.tsx index 5cab6f02cc5..30ec3d7a139 100644 --- a/packages/react-core/src/components/NumberInput/examples/NumberInputUnit.tsx +++ b/packages/react-core/src/components/NumberInput/examples/NumberInputUnit.tsx @@ -37,6 +37,7 @@ export const NumberInputUnit: React.FunctionComponent = () => { minusBtnAriaLabel="minus 1" plusBtnAriaLabel="plus 1" unit="%" + allowEmptyInput />

@@ -51,6 +52,7 @@ export const NumberInputUnit: React.FunctionComponent = () => { plusBtnAriaLabel="plus 0.01" unit="$" unitPosition="before" + allowEmptyInput /> ); diff --git a/packages/react-core/src/components/NumberInput/examples/NumberInputUnitThreshold.tsx b/packages/react-core/src/components/NumberInput/examples/NumberInputUnitThreshold.tsx index 98cf3c66ed9..80c4670673c 100644 --- a/packages/react-core/src/components/NumberInput/examples/NumberInputUnitThreshold.tsx +++ b/packages/react-core/src/components/NumberInput/examples/NumberInputUnitThreshold.tsx @@ -59,6 +59,7 @@ export const NumberInputUnitThreshold: React.FunctionComponent = () => { minusBtnAriaLabel="minus" plusBtnAriaLabel="plus" unit="%" + allowEmptyInput /> ); diff --git a/packages/react-core/src/components/NumberInput/examples/NumberInputVaryingSizes.tsx b/packages/react-core/src/components/NumberInput/examples/NumberInputVaryingSizes.tsx index d6430cf9dbe..cb8ac42dbab 100644 --- a/packages/react-core/src/components/NumberInput/examples/NumberInputVaryingSizes.tsx +++ b/packages/react-core/src/components/NumberInput/examples/NumberInputVaryingSizes.tsx @@ -35,6 +35,7 @@ export const NumberInputVaryingSizes: React.FunctionComponent = () => { minusBtnAriaLabel="input 2 minus" plusBtnAriaLabel="input 2 plus" widthChars={1} + allowEmptyInput />

@@ -48,6 +49,7 @@ export const NumberInputVaryingSizes: React.FunctionComponent = () => { minusBtnAriaLabel="input 2 minus" plusBtnAriaLabel="input 2 plus" widthChars={10} + allowEmptyInput />

@@ -61,6 +63,7 @@ export const NumberInputVaryingSizes: React.FunctionComponent = () => { minusBtnAriaLabel="input 3 minus" plusBtnAriaLabel="input 3 plus" widthChars={5} + allowEmptyInput />

@@ -74,6 +77,7 @@ export const NumberInputVaryingSizes: React.FunctionComponent = () => { minusBtnAriaLabel="input 4 minus" plusBtnAriaLabel="input 4 plus" widthChars={5} + allowEmptyInput /> ); diff --git a/packages/react-core/src/components/NumberInput/examples/NumberInputWithStatus.tsx b/packages/react-core/src/components/NumberInput/examples/NumberInputWithStatus.tsx index ef776062074..5e1b762cf39 100644 --- a/packages/react-core/src/components/NumberInput/examples/NumberInputWithStatus.tsx +++ b/packages/react-core/src/components/NumberInput/examples/NumberInputWithStatus.tsx @@ -53,6 +53,7 @@ export const NumberInputWithStatus: React.FunctionComponent = () => { inputAriaLabel="number input" minusBtnAriaLabel="minus" plusBtnAriaLabel="plus" + allowEmptyInput /> ); diff --git a/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx b/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx index 515db88f516..c95ec71e90c 100644 --- a/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx +++ b/packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx @@ -344,6 +344,7 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = () minusBtnAriaLabel="minus" plusBtnAriaLabel="plus" style={{ margin: '12px 0' }} + allowEmptyInput /> diff --git a/packages/react-integration/demo-app-ts/src/components/demos/NumberInputDemo/NumberInputDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/NumberInputDemo/NumberInputDemo.tsx index 2811603b4ec..9c3a401bb00 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/NumberInputDemo/NumberInputDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/NumberInputDemo/NumberInputDemo.tsx @@ -87,6 +87,7 @@ export class NumberInputDemo extends Component { plusBtnProps={{ id: 'plus-button' }} unit="%" widthChars={5} + allowEmptyInput />

@@ -108,6 +109,7 @@ export class NumberInputDemo extends Component { unit="$" unitPosition="before" isDisabled + allowEmptyInput />

@@ -129,6 +131,7 @@ export class NumberInputDemo extends Component { plusBtnProps={{ id: 'plus-button3' }} unit="$" unitPosition="before" + allowEmptyInput /> );