Merge pull request #517 from orangemug/fix/editing-of-number-and-string-inputs

Fix for string/number inputs when inputting invalid of intermediate values

src/components/inputs/NumberInput.jsx

@@ -13,25 +13,28 @@ class NumberInput extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
-      value: props.value
+      editing: false,
+      value: props.value,
     }
   }
 
   static getDerivedStateFromProps(props, state) {
+    if (!state.editing) {
       return {
         value: props.value
       };
     }
+  }
 
   changeValue(newValue) {
+    this.setState({editing: true});
     const value = parseFloat(newValue)
 
     const hasChanged = this.state.value !== value
     if(this.isValid(value) && hasChanged) {
       this.props.onChange(value)
-    } else {
-      this.setState({ value: newValue })
     }
+    this.setState({ value: newValue })
   }
 
   isValid(v) {
@@ -52,6 +55,7 @@ class NumberInput extends React.Component {
   }
 
   resetValue = () => {
+    this.setState({editing: false});
     // Reset explicitly to default value if value has been cleared
     if(this.state.value === "") {
       return this.changeValue(this.props.default)

src/components/inputs/StringInput.jsx

@@ -14,13 +14,16 @@ class StringInput extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
+      editing: false,
       value: props.value || ''
     }
   }
 
-  componentDidUpdate(prevProps) {
-    if(this.props.value !== prevProps.value) {
-      this.setState({value: this.props.value})
+  static getDerivedStateFromProps(props, state) {
+    if (!state.editing) {
+      return {
+        value: props.value
+      };
     }
   }
 
@@ -51,11 +54,15 @@ class StringInput extends React.Component {
       placeholder: this.props.default,
       onChange: e => {
         this.setState({
+          editing: true,
           value: e.target.value
         })
       },
       onBlur: () => {
-        if(this.state.value!==this.props.value) this.props.onChange(this.state.value)
+        if(this.state.value!==this.props.value) {
+          this.setState({editing: false});
+          this.props.onChange(this.state.value);
+        }
       }
     });
   }