fix(NumberInput): Custom increment/decrement and thresholds (#7159)

* fix(NumberInput): Custom increment/decrement and thresholds * apply focus on text input only
patternfly · Apr 8, 2022 · 28853de · 28853de
1 parent d0e29f0
commit 28853de
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/packages/react-core/src/components/NumberInput/NumberInput.tsx b/packages/react-core/src/components/NumberInput/NumberInput.tsx
@@ -20,6 +20,8 @@ export interface NumberInputProps extends React.HTMLProps<HTMLDivElement> {
   onMinus?: (event: React.MouseEvent, name?: string) => void;
   /** Callback for the text input changing */
   onChange?: (event: React.FormEvent<HTMLInputElement>) => void;
+  /** Callback function when text input is blurred (focus leaves) */
+  onBlur?: (event?: any) => void;
   /** Callback for the plus button */
   onPlus?: (event: React.MouseEvent, name?: string) => void;
   /** Adds the given unit to the number input */
@@ -66,6 +68,7 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
   isDisabled = false,
   onMinus = () => {},
   onChange,
+  onBlur,
   onPlus = () => {},
   unit,
   unitPosition = 'after',
@@ -116,6 +119,7 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
           aria-label={inputAriaLabel}
           {...(isDisabled && { disabled: isDisabled })}
           {...(onChange && { onChange })}
+          {...(onBlur && { onBlur })}
           {...(!onChange && { readOnly: true })}
           {...inputProps}
           onKeyDown={keyDownHandler}

diff --git a/packages/react-core/src/components/NumberInput/examples/NumberInput.md b/packages/react-core/src/components/NumberInput/examples/NumberInput.md
@@ -447,6 +447,13 @@ class CustomStepNumberInput extends React.Component {
     };
 
     this.onChange = event => {
+      const newValue = isNaN(event.target.value) ? 0 : Number(event.target.value);
+      this.setState({
+        value: newValue
+      });
+    };
+
+    this.onBlur = event => {
       const newValue = isNaN(event.target.value) ? 0 : Number(event.target.value);
       this.setState({
         value: newValue > this.maxValue ? this.maxValue : newValue < this.minValue ? this.minValue : newValue
@@ -463,6 +470,7 @@ class CustomStepNumberInput extends React.Component {
         max={this.maxValue}
         onMinus={this.stepper(-3)}
         onChange={this.onChange}
+        onBlur={this.onBlur}
         onPlus={this.stepper(3)}
         inputName="input"
         inputAriaLabel="number input"