From c58ae0f8956d969995aacb5da874171f8d1ed3ec Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Mon, 6 Apr 2020 09:55:07 +0100
Subject: [PATCH 1/3] Fix <NumberInput/> to allow for decimal numbers.

---
 src/components/inputs/NumberInput.jsx | 57 +++++++++++++++++++--------
 1 file changed, 40 insertions(+), 17 deletions(-)

diff --git a/src/components/inputs/NumberInput.jsx b/src/components/inputs/NumberInput.jsx
index 2be980b..d575d53 100644
--- a/src/components/inputs/NumberInput.jsx
+++ b/src/components/inputs/NumberInput.jsx
@@ -31,7 +31,7 @@ class NumberInput extends React.Component {
   }
 
   static getDerivedStateFromProps(props, state) {
-    if (!state.editing) {
+    if (!state.editing && props.value !== state.value) {
       return {
         value: props.value,
         dirtyValue: props.value,
@@ -49,12 +49,17 @@ class NumberInput extends React.Component {
     if(this.isValid(value) && hasChanged) {
       this.props.onChange(value)
       this.setState({
-        dirtyValue: newValue,
+        value: newValue,
+      });
+    }
+    else if (!this.isValid(value) && hasChanged) {
+      this.setState({
+        value: undefined,
       });
     }
 
     this.setState({
-      value: newValue,
+      dirtyValue: newValue === "" ? undefined : newValue,
     })
   }
 
@@ -144,8 +149,14 @@ class NumberInput extends React.Component {
       this.props.min !== undefined && this.props.max !== undefined &&
       this.props.allowRange
     ) {
-      const dirtyValue = this.state.dirtyValue === undefined ? this.props.default : this.state.dirtyValue
-      const value = this.state.value === undefined ? "" : this.state.value;
+      const value = this.state.editing ? this.state.dirtyValue : this.state.value;
+      let inputValue;
+      if (this.state.editingRange) {
+        inputValue = this.state.value;
+      }
+      else {
+        inputValue = value;
+      }
 
       return <div className="maputnik-number-container">
         <input
@@ -156,21 +167,26 @@ class NumberInput extends React.Component {
           min={this.props.min}
           step="any"
           spellCheck="false"
-          value={dirtyValue}
+          placeholder={this.props.default}
+          value={value === undefined ? "" : value}
           aria-hidden="true"
           onChange={this.onChangeRange}
           onKeyDown={() => {
             this._keyboardEvent = true;
           }}
           onPointerDown={() => {
-            this.setState({editing: true});
+            this.setState({editing: true, editingRange: true});
           }}
           onPointerUp={() => {
             // Safari doesn't get onBlur event
-            this.setState({editing: false});
+            this.setState({editing: false, editingRange: false});
           }}
           onBlur={() => {
-            this.setState({editing: false});
+            this.setState({
+              editing: false,
+              editingRange: false,
+              dirtyValue: this.state.value,
+            });
           }}
         />
         <input
@@ -179,25 +195,32 @@ class NumberInput extends React.Component {
           spellCheck="false"
           className="maputnik-number"
           placeholder={this.props.default}
-          value={value}
-          onChange={e => {
-            if (!this.state.editing) {
-              this.changeValue(e.target.value);
-            }
+          value={inputValue === undefined ? "" : inputValue}
+          onFocus={e => {
+            this.setState({editing: true});
+          }}
+          onChange={e => {
+            this.changeValue(e.target.value);
+          }}
+          onBlur={e => {
+            this.setState({editing: false});
+            this.resetValue()
           }}
-          onBlur={this.resetValue}
         />
       </div>
     }
     else {
-      const value = this.state.value === undefined ? "" : this.state.value;
+      const value = this.state.editing ? this.state.dirtyValue : this.state.value;
 
       return <input
         spellCheck="false"
         className="maputnik-number"
         placeholder={this.props.default}
-        value={value}
+        value={value === undefined ? "" : value}
         onChange={e => this.changeValue(e.target.value)}
+        onFocus={() => {
+          this.setState({editing: true});
+        }}
         onBlur={this.resetValue}
         required={this.props.required}
       />

From d5d387f349d5c20aa34524cc07f3957ba08365f2 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Mon, 6 Apr 2020 10:24:31 +0100
Subject: [PATCH 2/3] Removed placeholder on range (doesn't work) in favour
 'default' value merged into 'value'.

---
 src/components/inputs/NumberInput.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/inputs/NumberInput.jsx b/src/components/inputs/NumberInput.jsx
index d575d53..79b3aee 100644
--- a/src/components/inputs/NumberInput.jsx
+++ b/src/components/inputs/NumberInput.jsx
@@ -150,6 +150,7 @@ class NumberInput extends React.Component {
       this.props.allowRange
     ) {
       const value = this.state.editing ? this.state.dirtyValue : this.state.value;
+      const defaultValue = this.props.default === undefined ? "" : this.props.default;
       let inputValue;
       if (this.state.editingRange) {
         inputValue = this.state.value;
@@ -167,8 +168,7 @@ class NumberInput extends React.Component {
           min={this.props.min}
           step="any"
           spellCheck="false"
-          placeholder={this.props.default}
-          value={value === undefined ? "" : value}
+          value={value === undefined ? defaultValue : value}
           aria-hidden="true"
           onChange={this.onChangeRange}
           onKeyDown={() => {

From a624909819ebef32b94901d8e5018b2614a1269e Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Mon, 6 Apr 2020 10:40:30 +0100
Subject: [PATCH 3/3] Reset dirtyValue on resetValue

---
 src/components/inputs/NumberInput.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/inputs/NumberInput.jsx b/src/components/inputs/NumberInput.jsx
index 79b3aee..b46fe6b 100644
--- a/src/components/inputs/NumberInput.jsx
+++ b/src/components/inputs/NumberInput.jsx
@@ -92,11 +92,13 @@ class NumberInput extends React.Component {
     }
 
     // If set value is invalid fall back to the last valid value from props or at last resort the default value
-    if(!this.isValid(this.state.value)) {
+    if (!this.isValid(this.state.value)) {
       if(this.isValid(this.props.value)) {
         this.changeValue(this.props.value)
+        this.setState({dirtyValue: this.props.value});
       } else {
         this.changeValue(undefined);
+        this.setState({dirtyValue: undefined});
       }
     }
   }