From 41329ec2f81d4254d00bf24ec30eea27f207a296 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Tue, 21 May 2019 18:42:19 +0100
Subject: [PATCH] Fixes for firefox, this makes the range input only update on
 pointerup

---
 src/components/inputs/NumberInput.jsx | 82 ++++++++++++++++++---------
 src/styles/_input.scss                |  5 ++
 2 files changed, 59 insertions(+), 28 deletions(-)

diff --git a/src/components/inputs/NumberInput.jsx b/src/components/inputs/NumberInput.jsx
index 0d0e488..32e210b 100644
--- a/src/components/inputs/NumberInput.jsx
+++ b/src/components/inputs/NumberInput.jsx
@@ -21,26 +21,34 @@ class NumberInput extends React.Component {
     this.state = {
       editing: false,
       value: props.value,
+      dirtyValue: props.value,
     }
   }
 
   static getDerivedStateFromProps(props, state) {
     if (!state.editing) {
       return {
-        value: props.value
+        value: props.value,
+        dirtyValue: props.value,
       };
     }
+    else {
+      return null;
+    }
   }
 
   changeValue(newValue) {
     this.setState({editing: true});
     const value = parseFloat(newValue)
 
-    const hasChanged = this.state.value !== value
+    const hasChanged = this.state.value !== value;
     if(this.isValid(value) && hasChanged) {
       this.props.onChange(value)
     }
-    this.setState({ value: newValue })
+    this.setState({
+      value: newValue,
+      dirtyValue: newValue,
+    })
   }
 
   isValid(v) {
@@ -78,37 +86,36 @@ class NumberInput extends React.Component {
   }
 
   onChangeRange = (e) => {
-    const val = parseFloat(e.target.value, 10);
+    const value = parseFloat(e.target.value, 10);
     const step = this.props.rangeStep;
-    let out = val;
+    let dirtyValue = value;
 
     if(step) {
       // Can't do this with the <input/> range step attribute else we won't be able to set a high precision value via the text input.
-      const snap = val % step;
+      const snap = value % step;
 
       // Round up/down to step
       if (snap < step/2) {
-        out = val - snap;
+        dirtyValue = value - snap;
       }
       else {
-        out = val + (step - snap);
+        dirtyValue = value + (step - snap);
       };
     }
 
-    this.changeValue(out);
+    this.setState({editing: true, value, dirtyValue});
   }
 
   render() {
-    let rangeEl;
-
     if(
       this.props.hasOwnProperty("min") && this.props.hasOwnProperty("max") &&
       this.props.min !== undefined && this.props.max !== undefined &&
       this.props.allowRange
     ) {
-      const value = this.props.value === undefined ? this.props.default : this.props.value;
+      const value = this.state.value === undefined ? this.props.default : this.state.value;
+      const rangeValue = Number.isNaN(parseFloat(value, 10)) ? this.props.default : value;
 
-      rangeEl = (
+      return <div className="maputnik-number-container">
         <input
           className="maputnik-number-range"
           key="range"
@@ -117,25 +124,44 @@ class NumberInput extends React.Component {
           min={this.props.min}
           step="any"
           spellCheck="false"
-          value={value}
+          value={rangeValue}
           onChange={this.onChangeRange}
+          onPointerUp={() => {
+            const {dirtyValue} = this.state;
+            const hasChanged = this.state.props !== dirtyValue
+            if(this.isValid(dirtyValue) && hasChanged) {
+              this.setState({editing: false}, () => {
+                this.props.onChange(dirtyValue);
+              });
+            }
+          }}
+        />
+        <input
+          key="text"
+          spellCheck="false"
+          className="maputnik-number"
+          placeholder={this.props.default}
+          value={this.state.dirtyValue}
+          onChange={e => {
+            this.changeValue(e.target.value)
+          }}
           onBlur={this.resetValue}
         />
-      );
+      </div>
+    }
+    else {
+      return <div className="maputnik-number-container">
+        <input
+          key="text"
+          spellCheck="false"
+          className="maputnik-number"
+          placeholder={this.props.default}
+          value={this.state.value}
+          onChange={e => this.changeValue(e.target.value)}
+          onBlur={this.resetValue}
+        />
+      </div>
     }
-
-    return <div className="maputnik-number-container">
-      {rangeEl}
-      <input
-        key="text"
-        spellCheck="false"
-        className="maputnik-number"
-        placeholder={this.props.default}
-        value={this.state.value}
-        onChange={e => this.changeValue(e.target.value)}
-        onBlur={this.resetValue}
-      />
-    </div>
   }
 }
 
diff --git a/src/styles/_input.scss b/src/styles/_input.scss
index 7d1f0cc..066a97b 100644
--- a/src/styles/_input.scss
+++ b/src/styles/_input.scss
@@ -183,3 +183,8 @@
     margin-bottom: $margin-3;
   }
 }
+
+.maputnik-input-block-content {
+  position: relative;
+  overflow: hidden;
+}