Number input and max release size limit increased

Fixed: Number input changing value while typing
New: Maximum size limit has been doubled

Closes #2921

frontend/src/Components/Form/NumberInput.js

@@ -2,44 +2,86 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import TextInput from './TextInput';
 
+function parseValue(props, value) {
+  const {
+    isFloat,
+    min,
+    max
+  } = props;
+
+  if (value == null) {
+    return min;
+  }
+
+  let newValue = isFloat ? parseFloat(value) : parseInt(value);
+
+  if (min != null && newValue != null && newValue < min) {
+    newValue = min;
+  } else if (max != null && newValue != null && newValue > max) {
+    newValue = max;
+  }
+
+  return newValue;
+}
+
 class NumberInput extends Component {
 
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      value: props.value.toString(),
+      isFocused: false
+    };
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (this.props.value !== prevProps.value && !this.state.isFocused) {
+      this.setState({ value: this.props.value.toString() });
+    }
+  }
+
   //
   // Listeners
 
   onChange = ({ name, value }) => {
-    let newValue = null;
-
-    if (value) {
-      newValue = this.props.isFloat ? parseFloat(value) : parseInt(value);
-    }
+    this.setState({ value });
 
     this.props.onChange({
       name,
-      value: newValue
+      value: parseValue(this.props, value)
     });
+
+  }
+
+  onFocus = () => {
+    this.setState({ isFocused: true });
   }
 
   onBlur = () => {
     const {
       name,
-      value,
-      min,
-      max,
       onChange
     } = this.props;
 
-    let newValue = value;
+    const { value } = this.state;
+    const parsedValue = parseValue(this.props, value);
 
-    if (min != null && newValue != null && newValue < min) {
-      newValue = min;
-    } else if (max != null && newValue != null && newValue > max) {
-      newValue = max;
+    if (parsedValue.toString() === value) {
+      this.setState({ isFocused: false });
+    } else {
+      this.setState({
+        value: parsedValue.toString(),
+        isFocused: false
+      });
     }
 
     onChange({
       name,
-      value: newValue
+      value: parseValue(this.props, this.state.value)
     });
   }
 
@@ -47,18 +89,16 @@ class NumberInput extends Component {
   // Render
 
   render() {
-    const {
-      value,
-      ...otherProps
-    } = this.props;
+    const value = this.state.value;
 
     return (
       <TextInput
+        {...this.props}
         type="number"
         value={value == null ? '' : value}
-        {...otherProps}
         onChange={this.onChange}
         onBlur={this.onBlur}
+        onFocus={this.onFocus}
       />
     );
   }

frontend/src/Components/Form/TextInput.js

@@ -127,6 +127,7 @@ class TextInput extends Component {
       hasError,
       hasWarning,
       hasButton,
+      step,
       onBlur
     } = this.props;
 
@@ -146,6 +147,7 @@ class TextInput extends Component {
         )}
         name={name}
         value={value}
+        step={step}
         onChange={this.onChange}
         onFocus={this.onFocus}
         onBlur={onBlur}
@@ -168,6 +170,7 @@ TextInput.propTypes = {
   hasError: PropTypes.bool,
   hasWarning: PropTypes.bool,
   hasButton: PropTypes.bool,
+  step: PropTypes.number,
   onChange: PropTypes.func.isRequired,
   onFocus: PropTypes.func,
   onBlur: PropTypes.func,