From cc8fe4e02ea48407cb5c736a125df736a23d604d Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Sat, 18 May 2019 15:56:14 +0100
Subject: [PATCH] Fix for buggy string/number inputs when inputting invalid of
 intermediate values

---
 src/components/inputs/NumberInput.jsx | 16 ++++++++++------
 src/components/inputs/StringInput.jsx | 15 +++++++++++----
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/components/inputs/NumberInput.jsx b/src/components/inputs/NumberInput.jsx
index 75ed148..3071e35 100644
--- a/src/components/inputs/NumberInput.jsx
+++ b/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) {
-    return {
-      value: props.value
-    };
+    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)
diff --git a/src/components/inputs/StringInput.jsx b/src/components/inputs/StringInput.jsx
index f9d2853..875a454 100644
--- a/src/components/inputs/StringInput.jsx
+++ b/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);
+        }
       }
     });
   }