From bd16eb048da6589f8b24f08b628d6a2a88b7a76f Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Fri, 28 Oct 2022 10:49:42 -0400 Subject: [PATCH 1/8] fix(NumberInput): allow user to back out number to type input --- .../src/components/NumberInput/NumberInput.tsx | 1 - .../NumberInput/__tests__/NumberInput.test.tsx | 8 ++++---- .../examples/NumberInputUnitThreshold.tsx | 14 ++++++++++++-- 3 files changed, 16 insertions(+), 7 deletions(-) diff --git a/packages/react-core/src/components/NumberInput/NumberInput.tsx b/packages/react-core/src/components/NumberInput/NumberInput.tsx index 80e04f4ad71..e70c6f7b985 100644 --- a/packages/react-core/src/components/NumberInput/NumberInput.tsx +++ b/packages/react-core/src/components/NumberInput/NumberInput.tsx @@ -89,7 +89,6 @@ export const NumberInput: React.FunctionComponent = ({ plusBtnProps, ...props }: NumberInputProps) => { - 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 3f079d3fa59..c2bc167c1f4 100644 --- a/packages/react-core/src/components/NumberInput/__tests__/NumberInput.test.tsx +++ b/packages/react-core/src/components/NumberInput/__tests__/NumberInput.test.tsx @@ -195,22 +195,22 @@ describe('numberInput', () => { expect(input).toHaveDisplayValue('47.01'); }); - test('renders 0 if no value passed', () => { + test('renders 0 (default value) if no value passed', () => { render(); const input = screen.getByRole('spinbutton'); expect(input).toHaveDisplayValue('0'); }); - test('renders 0 if undefined value passed', () => { + test('renders 0 (default value) if undefined value passed', () => { render(); const input = screen.getByRole('spinbutton'); expect(input).toHaveDisplayValue('0'); }); - test('renders 0 if null value passed', () => { + test('renders nothing if null value passed', () => { render(); const input = screen.getByRole('spinbutton'); - expect(input).toHaveDisplayValue('0'); + expect(input).toHaveDisplayValue(''); }); test('does not throw an error if onChange is passed via inputProps as well as the onChange prop', () => { diff --git a/packages/react-core/src/components/NumberInput/examples/NumberInputUnitThreshold.tsx b/packages/react-core/src/components/NumberInput/examples/NumberInputUnitThreshold.tsx index 5ef9de026d2..6ec7b075b24 100644 --- a/packages/react-core/src/components/NumberInput/examples/NumberInputUnitThreshold.tsx +++ b/packages/react-core/src/components/NumberInput/examples/NumberInputUnitThreshold.tsx @@ -24,8 +24,17 @@ export const NumberInputUnitThreshold: React.FunctionComponent = () => { const onChange = (event: React.FormEvent) => { const target = event.target as HTMLInputElement; - const newValue = normalizeBetween(isNaN(+target.value) ? 0 : Number(target.value), minValue, maxValue); - setValue(newValue); + setValue(+target.value); + }; + + const onBlur = (event: React.FocusEvent) => { + const blurVal = +event.target.value; + + if (blurVal < minValue) { + setValue(minValue); + } else if (blurVal > maxValue) { + setValue(maxValue); + } }; const onPlus = () => { @@ -43,6 +52,7 @@ export const NumberInputUnitThreshold: React.FunctionComponent = () => { max={maxValue} onMinus={onMinus} onChange={onChange} + onBlur={onBlur} onPlus={onPlus} inputName="input" inputAriaLabel="number input" From b6f8424e869dd6b32a4f1b109b77564a153281ab Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Mon, 31 Oct 2022 10:39:41 -0400 Subject: [PATCH 2/8] fix test --- .../src/components/demos/NumberInputDemo/NumberInputDemo.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 68193519109..2b93f9a48df 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 @@ -14,7 +14,7 @@ export class NumberInputDemo extends Component { state: NumberInputDemoState = { value: 0, - value2: null + value2: undefined }; onMinus = () => { From 0af897a4bd9919196e8f424fbfa42b28d780c0ad Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Mon, 31 Oct 2022 12:11:28 -0400 Subject: [PATCH 3/8] fix plus logic for undefined --- .../src/components/demos/NumberInputDemo/NumberInputDemo.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 2b93f9a48df..af58f9ed980 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 @@ -49,7 +49,7 @@ export class NumberInputDemo extends Component { onPlus2 = () => { this.setState({ - value2: this.state.value2 + 1 + value2: this.state.value2 + 1 || 1 }); }; From 27abeb32e73282b60c9f5a346c047ae2d57db8f9 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Tue, 1 Nov 2022 12:11:48 -0400 Subject: [PATCH 4/8] pr feedback --- .../src/components/NumberInput/NumberInput.tsx | 2 +- .../NumberInput/examples/NumberInputUnitThreshold.tsx | 10 +++++----- .../demos/NumberInputDemo/NumberInputDemo.tsx | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/react-core/src/components/NumberInput/NumberInput.tsx b/packages/react-core/src/components/NumberInput/NumberInput.tsx index e70c6f7b985..d4d3ed43954 100644 --- a/packages/react-core/src/components/NumberInput/NumberInput.tsx +++ b/packages/react-core/src/components/NumberInput/NumberInput.tsx @@ -10,7 +10,7 @@ import { TextInput } from '../TextInput'; export interface NumberInputProps extends React.HTMLProps { /** Value of the number input */ - value?: number | null; + value?: number | ''; /** Additional classes added to the number input */ className?: string; /** Sets the width of the number input to a number of characters */ diff --git a/packages/react-core/src/components/NumberInput/examples/NumberInputUnitThreshold.tsx b/packages/react-core/src/components/NumberInput/examples/NumberInputUnitThreshold.tsx index 6ec7b075b24..98cf3c66ed9 100644 --- a/packages/react-core/src/components/NumberInput/examples/NumberInputUnitThreshold.tsx +++ b/packages/react-core/src/components/NumberInput/examples/NumberInputUnitThreshold.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { NumberInput } from '@patternfly/react-core'; export const NumberInputUnitThreshold: React.FunctionComponent = () => { - const [value, setValue] = React.useState(0); + const [value, setValue] = React.useState(0); const minValue = 0; const maxValue = 10; @@ -18,13 +18,13 @@ export const NumberInputUnitThreshold: React.FunctionComponent = () => { }; const onMinus = () => { - const newValue = normalizeBetween(value - 1, minValue, maxValue); + const newValue = normalizeBetween((value as number) - 1, minValue, maxValue); setValue(newValue); }; const onChange = (event: React.FormEvent) => { - const target = event.target as HTMLInputElement; - setValue(+target.value); + const value = (event.target as HTMLInputElement).value; + setValue(value === '' ? value : +value); }; const onBlur = (event: React.FocusEvent) => { @@ -38,7 +38,7 @@ export const NumberInputUnitThreshold: React.FunctionComponent = () => { }; const onPlus = () => { - const newValue = normalizeBetween(value + 1, minValue, maxValue); + const newValue = normalizeBetween((value as number) + 1, minValue, maxValue); setValue(newValue); }; 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 af58f9ed980..92b370dba23 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 @@ -49,7 +49,7 @@ export class NumberInputDemo extends Component { onPlus2 = () => { this.setState({ - value2: this.state.value2 + 1 || 1 + value2: (this.state.value2 || 0) + 1 }); }; From e217cca6d026438ac72bf7d1c0df7d477488f014 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Thu, 3 Nov 2022 10:57:33 -0400 Subject: [PATCH 5/8] add example desc --- .../src/components/NumberInput/examples/NumberInput.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/react-core/src/components/NumberInput/examples/NumberInput.md b/packages/react-core/src/components/NumberInput/examples/NumberInput.md index ef7f961cdd0..851d9f680ca 100644 --- a/packages/react-core/src/components/NumberInput/examples/NumberInput.md +++ b/packages/react-core/src/components/NumberInput/examples/NumberInput.md @@ -19,6 +19,8 @@ propComponents: ['NumberInput'] ### With unit and thresholds +To support manual entry of the number input, allow the number input value be a number or an empty string. To enable the entered value to snap to the nearest threshold if the entered input is out of bounds, define the blur event handler. + ```ts file="./NumberInputUnitThreshold.tsx" ``` From 087e0f89dfd68d2543183234a46e927f1f5d736b Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Thu, 3 Nov 2022 10:58:07 -0400 Subject: [PATCH 6/8] update example desc --- .../src/components/NumberInput/examples/NumberInput.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/components/NumberInput/examples/NumberInput.md b/packages/react-core/src/components/NumberInput/examples/NumberInput.md index 851d9f680ca..0cd602066b2 100644 --- a/packages/react-core/src/components/NumberInput/examples/NumberInput.md +++ b/packages/react-core/src/components/NumberInput/examples/NumberInput.md @@ -19,7 +19,7 @@ propComponents: ['NumberInput'] ### With unit and thresholds -To support manual entry of the number input, allow the number input value be a number or an empty string. To enable the entered value to snap to the nearest threshold if the entered input is out of bounds, define the blur event handler. +To support keyboard entry of the number input, allow the number input value be a number or an empty string. To enable the entered value to snap to the nearest threshold if the entered input is out of bounds, define the blur event handler. ```ts file="./NumberInputUnitThreshold.tsx" ``` From 411c75dc4bf5219f766407f6d9b856c022525390 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Thu, 3 Nov 2022 13:14:51 -0400 Subject: [PATCH 7/8] update examples for empty input --- .../NumberInput/examples/NumberInput.md | 2 +- .../examples/NumberInputCustomStep.tsx | 8 +++---- .../NumberInputCustomStepAndThreshold.tsx | 9 ++++---- .../examples/NumberInputDefault.tsx | 10 ++++----- .../examples/NumberInputDisabled.tsx | 10 ++++----- .../NumberInput/examples/NumberInputUnit.tsx | 20 ++++++++--------- .../examples/NumberInputVaryingSizes.tsx | 22 +++++++++---------- .../examples/NumberInputWithStatus.tsx | 11 +++++----- 8 files changed, 45 insertions(+), 47 deletions(-) diff --git a/packages/react-core/src/components/NumberInput/examples/NumberInput.md b/packages/react-core/src/components/NumberInput/examples/NumberInput.md index 0cd602066b2..9e90f62a691 100644 --- a/packages/react-core/src/components/NumberInput/examples/NumberInput.md +++ b/packages/react-core/src/components/NumberInput/examples/NumberInput.md @@ -19,7 +19,7 @@ propComponents: ['NumberInput'] ### With unit and thresholds -To support keyboard entry of the number input, allow the number input value be a number or an empty string. To enable the entered value to snap to the nearest threshold if the entered input is out of bounds, define the blur event handler. +To enable a user entered value to snap to the nearest threshold if the entered input is out of bounds, define the blur event handler. ```ts file="./NumberInputUnitThreshold.tsx" ``` diff --git a/packages/react-core/src/components/NumberInput/examples/NumberInputCustomStep.tsx b/packages/react-core/src/components/NumberInput/examples/NumberInputCustomStep.tsx index d46391fa724..c63f02b754b 100644 --- a/packages/react-core/src/components/NumberInput/examples/NumberInputCustomStep.tsx +++ b/packages/react-core/src/components/NumberInput/examples/NumberInputCustomStep.tsx @@ -2,16 +2,16 @@ import React from 'react'; import { NumberInput } from '@patternfly/react-core'; export const NumberInputCustomStep: React.FunctionComponent = () => { - const [value, setValue] = React.useState(90); + const [value, setValue] = React.useState(90); const step = 3; const stepper = (stepValue: number) => { - setValue(value + stepValue); + setValue((value || 0) + stepValue); }; const onChange = (event: React.FormEvent) => { - const target = event.target as HTMLInputElement; - setValue(Number(target.value)); + const value = (event.target as HTMLInputElement).value; + setValue(value === '' ? value : +value); }; return ( diff --git a/packages/react-core/src/components/NumberInput/examples/NumberInputCustomStepAndThreshold.tsx b/packages/react-core/src/components/NumberInput/examples/NumberInputCustomStepAndThreshold.tsx index a77f875dc3a..f410c255616 100644 --- a/packages/react-core/src/components/NumberInput/examples/NumberInputCustomStepAndThreshold.tsx +++ b/packages/react-core/src/components/NumberInput/examples/NumberInputCustomStepAndThreshold.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { NumberInput } from '@patternfly/react-core'; export const NumberInputCustomStepAndThreshold: React.FunctionComponent = () => { - const [value, setValue] = React.useState(90); + const [value, setValue] = React.useState(90); const minValue = 90; const maxValue = 100; const step = 3; @@ -19,13 +19,12 @@ export const NumberInputCustomStepAndThreshold: React.FunctionComponent = () => }; const stepper = (stepValue: number) => { - setValue(value + stepValue); + setValue((value || 0) + stepValue); }; const onChange = (event: React.FormEvent) => { - const target = event.target as HTMLInputElement; - const newValue = normalizeBetween(isNaN(+target.value) ? 0 : Number(target.value), minValue, maxValue); - setValue(newValue); + const value = (event.target as HTMLInputElement).value; + setValue(value === '' ? value : +value); }; const onBlur = (event: React.FormEvent) => { diff --git a/packages/react-core/src/components/NumberInput/examples/NumberInputDefault.tsx b/packages/react-core/src/components/NumberInput/examples/NumberInputDefault.tsx index a3e973a79f2..4f86471db04 100644 --- a/packages/react-core/src/components/NumberInput/examples/NumberInputDefault.tsx +++ b/packages/react-core/src/components/NumberInput/examples/NumberInputDefault.tsx @@ -2,20 +2,20 @@ import React from 'react'; import { NumberInput } from '@patternfly/react-core'; export const NumberInputDefault: React.FunctionComponent = () => { - const [value, setValue] = React.useState(90); + const [value, setValue] = React.useState(90); const onMinus = () => { - const newValue = value - 1; + const newValue = (value || 0) - 1; setValue(newValue); }; const onChange = (event: React.FormEvent) => { - const target = event.target as HTMLInputElement; - setValue(Number(target.value)); + const value = (event.target as HTMLInputElement).value; + setValue(value === '' ? value : +value); }; const onPlus = () => { - const newValue = value + 1; + const newValue = (value || 0) + 1; setValue(newValue); }; diff --git a/packages/react-core/src/components/NumberInput/examples/NumberInputDisabled.tsx b/packages/react-core/src/components/NumberInput/examples/NumberInputDisabled.tsx index 20b35f919d2..5f182ac00df 100644 --- a/packages/react-core/src/components/NumberInput/examples/NumberInputDisabled.tsx +++ b/packages/react-core/src/components/NumberInput/examples/NumberInputDisabled.tsx @@ -2,22 +2,22 @@ import React from 'react'; import { NumberInput } from '@patternfly/react-core'; export const NumberInputDisabled: React.FunctionComponent = () => { - const [value, setValue] = React.useState(100); + const [value, setValue] = React.useState(100); const minValue = 0; const maxValue = 100; const onMinus = () => { - const newValue = value - 1; + const newValue = (value || 0) - 1; setValue(newValue); }; const onChange = (event: React.FormEvent) => { - const target = event.target as HTMLInputElement; - setValue(Number(target.value)); + const value = (event.target as HTMLInputElement).value; + setValue(value === '' ? value : +value); }; const onPlus = () => { - const newValue = value + 1; + const newValue = (value || 0) + 1; setValue(newValue); }; diff --git a/packages/react-core/src/components/NumberInput/examples/NumberInputUnit.tsx b/packages/react-core/src/components/NumberInput/examples/NumberInputUnit.tsx index 1fcb8a79c0c..5cab6f02cc5 100644 --- a/packages/react-core/src/components/NumberInput/examples/NumberInputUnit.tsx +++ b/packages/react-core/src/components/NumberInput/examples/NumberInputUnit.tsx @@ -2,26 +2,26 @@ import React from 'react'; import { NumberInput } from '@patternfly/react-core'; export const NumberInputUnit: React.FunctionComponent = () => { - const [value1, setValue1] = React.useState(90); - const [value2, setValue2] = React.useState(Number((1.0).toFixed(2))); + const [value1, setValue1] = React.useState(90); + const [value2, setValue2] = React.useState(Number((1.0).toFixed(2))); - const onMinus1 = () => setValue1(value1 - 1); + const onMinus1 = () => setValue1((value1 || 0) - 1); const onChange1 = (event: React.FormEvent) => { - const target = event.target as HTMLInputElement; - setValue1(Number(target.value)); + const value = (event.target as HTMLInputElement).value; + setValue1(value === '' ? value : +value); }; - const onPlus1 = () => setValue1(value1 + 1); + const onPlus1 = () => setValue1((value1 || 0) + 1); const onMinus2 = () => { - const newValue = Number((value2 - 0.01).toFixed(2)); + const newValue = Number(((value2 || 0) - 0.01).toFixed(2)); setValue2(newValue); }; const onChange2 = (event: React.FormEvent) => { - const target = event.target as HTMLInputElement; - setValue2(Number(target.value)); + const value = (event.target as HTMLInputElement).value; + setValue2(value === '' ? value : +value); }; const onPlus2 = () => { - const newValue = Number((value2 + 0.01).toFixed(2)); + const newValue = Number(((value2 || 0) + 0.01).toFixed(2)); setValue2(newValue); }; diff --git a/packages/react-core/src/components/NumberInput/examples/NumberInputVaryingSizes.tsx b/packages/react-core/src/components/NumberInput/examples/NumberInputVaryingSizes.tsx index ddfa0c9209c..d6430cf9dbe 100644 --- a/packages/react-core/src/components/NumberInput/examples/NumberInputVaryingSizes.tsx +++ b/packages/react-core/src/components/NumberInput/examples/NumberInputVaryingSizes.tsx @@ -2,25 +2,25 @@ import React from 'react'; import { NumberInput } from '@patternfly/react-core'; export const NumberInputVaryingSizes: React.FunctionComponent = () => { - const [input1Value, setInput1Value] = React.useState(1); - const [input2Value, setInput2Value] = React.useState(1234567890); - const [input3Value, setInput3Value] = React.useState(5); - const [input4Value, setInput4Value] = React.useState(12345); + const [input1Value, setInput1Value] = React.useState(1); + const [input2Value, setInput2Value] = React.useState(1234567890); + const [input3Value, setInput3Value] = React.useState(5); + const [input4Value, setInput4Value] = React.useState(12345); const onChange = ( event: React.FormEvent, - updateFunction: React.Dispatch> + updateFunction: React.Dispatch> ) => { - const target = event.target as HTMLInputElement; - updateFunction(Number(target.value)); + const value = (event.target as HTMLInputElement).value; + updateFunction(value === '' ? value : +value); }; - const onMinus = (value, updateFunction: React.Dispatch>) => { - updateFunction(value - 1); + const onMinus = (value: number | '', updateFunction: React.Dispatch>) => { + updateFunction((value || 0) - 1); }; - const onPlus = (value, updateFunction: React.Dispatch>) => { - updateFunction(value + 1); + const onPlus = (value: number | '', updateFunction: React.Dispatch>) => { + updateFunction((value || 0) + 1); }; return ( diff --git a/packages/react-core/src/components/NumberInput/examples/NumberInputWithStatus.tsx b/packages/react-core/src/components/NumberInput/examples/NumberInputWithStatus.tsx index b5b6570a0f8..ef776062074 100644 --- a/packages/react-core/src/components/NumberInput/examples/NumberInputWithStatus.tsx +++ b/packages/react-core/src/components/NumberInput/examples/NumberInputWithStatus.tsx @@ -9,22 +9,21 @@ export const NumberInputWithStatus: React.FunctionComponent = () => { const [value, setValue] = React.useReducer((state, newVal) => Math.max(min, Math.min(max, Number(newVal))), 5); const onPlus = () => { - const newVal = value + 1; + const newVal = (value || 0) + 1; setValue(newVal); validate(newVal); }; const onMinus = () => { - const newVal = value - 1; + const newVal = (value || 0) - 1; setValue(newVal); validate(newVal); }; const onChange = (event: React.FormEvent) => { - const target = event.target as HTMLInputElement; - const newVal = isNaN(+target.value) ? 5 : Number(target.value); - setValue(newVal); - validate(newVal); + const value = (event.target as HTMLInputElement).value; + setValue(value === '' ? value : +value); + validate(value); }; const validate = newVal => { From afd936a0ba55d82a4e7e58144b80b1335517ff99 Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Mon, 7 Nov 2022 16:04:39 -0500 Subject: [PATCH 8/8] add integration test, update integration test name --- .../cypress/integration/numberInput.spec.ts | 9 ++++++++- .../demos/NumberInputDemo/NumberInputDemo.tsx | 11 +++++++++++ 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/packages/react-integration/cypress/integration/numberInput.spec.ts b/packages/react-integration/cypress/integration/numberInput.spec.ts index 05e6f8c73e2..325973ba35c 100644 --- a/packages/react-integration/cypress/integration/numberInput.spec.ts +++ b/packages/react-integration/cypress/integration/numberInput.spec.ts @@ -60,9 +60,16 @@ describe('NumberInput Demo Test', () => { .should('have.class', 'pf-c-input-group'); }); - it('initial null value can be increment with the plus button', () => { + it('initial undefined value can be increment with the plus button', () => { cy.get('#input3').should('have.value', 0); cy.get('#plus-button3').click(); cy.get('#input3').should('have.value', 1); }); + + it('out of bounds input value can be typed and snap to nearest threshold', () => { + cy.get('#input3').should('have.value', 1); + cy.get('#input3').type('5'); + cy.get('body').click(); + cy.get('#input3').should('have.value', 3); + }); }); 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 92b370dba23..2811603b4ec 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 @@ -53,6 +53,16 @@ export class NumberInputDemo extends Component { }); }; + onBlur = () => { + if (this.state.value2 > 3) { + this.setState({ + value2: 3 + }); + } else if (this.state.value2 < 0) { + this.setState({ value2: 0 }); + } + }; + render() { const { value, value2 } = this.state; const minValue = 0; @@ -109,6 +119,7 @@ export class NumberInputDemo extends Component { onMinus={this.onMinus2} onChange={this.onChange2} onPlus={this.onPlus2} + onBlur={this.onBlur} inputName="input 3" inputAriaLabel="number input 3" minusBtnAriaLabel="minus"