From d2952c2114ca5c6fd2b3192265d80d7311eb028a Mon Sep 17 00:00:00 2001
From: Matthew Taylor <mewtaylor@gmail.com>
Date: Wed, 1 Nov 2017 15:57:31 -0400
Subject: [PATCH] create liveinput hoc instead

this should solve the issue of being able to delete what you typed. Thanks!
---
 src/components/forms/live-input-hoc.jsx   | 60 +++++++++++++++++++++++
 src/components/mode-tools/mode-tools.jsx  | 16 ++----
 src/components/stroke-width-indicator.jsx | 10 ++--
 3 files changed, 67 insertions(+), 19 deletions(-)
 create mode 100644 src/components/forms/live-input-hoc.jsx

diff --git a/src/components/forms/live-input-hoc.jsx b/src/components/forms/live-input-hoc.jsx
new file mode 100644
index 00000000..dac4a905
--- /dev/null
+++ b/src/components/forms/live-input-hoc.jsx
@@ -0,0 +1,60 @@
+import bindAll from 'lodash.bindall';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+/**
+ * Higher Order Component to manage inputs that submit on change and <enter>
+ * @param {React.Component} Input text input that consumes onChange, onBlur, onKeyPress
+ * @returns {React.Component} Live input that calls onSubmit on change and <enter>
+ */
+export default function (Input) {
+    class LiveInput extends React.Component {
+        constructor (props) {
+            super(props);
+            bindAll(this, [
+                'handleChange',
+                'handleKeyPress',
+                'handleFlush'
+            ]);
+            this.state = {
+                value: null
+            };
+        }
+        handleKeyPress (e) {
+            if (e.key === 'Enter') {
+                this.handleChange(e);
+                e.target.blur();
+            }
+        }
+        handleFlush () {
+            this.setState({value: null});
+        }
+        handleChange (e) {
+            const isNumeric = typeof this.props.value === 'number';
+            const validatesNumeric = isNumeric ? !isNaN(e.target.value) : true;
+            if (e.target.value !== null && validatesNumeric) {
+                this.props.onSubmit(Number(e.target.value));
+            }
+            this.setState({value: e.target.value});
+        }
+        render () {
+            const liveValue = this.state.value === null ? this.props.value : this.state.value;
+            return (
+                <Input
+                    {...this.props}
+                    value={liveValue}
+                    onBlur={this.handleFlush}
+                    onChange={this.handleChange}
+                    onKeyPress={this.handleKeyPress}
+                />
+            );
+        }
+    }
+
+    LiveInput.propTypes = {
+        onSubmit: PropTypes.func.isRequired,
+        value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+    };
+
+    return LiveInput;
+}
diff --git a/src/components/mode-tools/mode-tools.jsx b/src/components/mode-tools/mode-tools.jsx
index 3fe3332f..7c297677 100644
--- a/src/components/mode-tools/mode-tools.jsx
+++ b/src/components/mode-tools/mode-tools.jsx
@@ -6,6 +6,7 @@ import React from 'react';
 import {changeBrushSize} from '../../reducers/brush-mode';
 import {changeBrushSize as changeEraserSize} from '../../reducers/eraser-mode';
 
+import LiveInputHOC from '../forms/live-input-hoc.jsx';
 import {injectIntl, intlShape} from 'react-intl';
 import Input from '../forms/input.jsx';
 // import LabeledIconButton from '../labeled-icon-button/labeled-icon-button.jsx';
@@ -21,6 +22,7 @@ import eraserIcon from '../eraser-mode/eraser.svg';
 
 import {MAX_STROKE_WIDTH} from '../../reducers/stroke-width';
 
+const LiveInput = LiveInputHOC(Input);
 const ModeToolsComponent = props => {
     const brushMessage = props.intl.formatMessage({
         defaultMessage: 'Brush',
@@ -44,17 +46,12 @@ const ModeToolsComponent = props => {
                         src={brushIcon}
                     />
                 </div>
-                <Input
+                <LiveInput
                     small
                     max={MAX_STROKE_WIDTH}
                     min="1"
                     type="number"
                     value={props.brushValue}
-                    onChange={function (e) {
-                        if (e.target.value !== null && !isNaN(e.target.value)) {
-                            props.onBrushSliderChange(Number(e.target.value));
-                        }
-                    }}
                     onSubmit={props.onBrushSliderChange}
                 />
             </div>
@@ -69,17 +66,12 @@ const ModeToolsComponent = props => {
                         src={eraserIcon}
                     />
                 </div>
-                <Input
+                <LiveInput
                     small
                     max={MAX_STROKE_WIDTH}
                     min="1"
                     type="number"
                     value={props.eraserValue}
-                    onChange={function (e) {
-                        if (e.target.value !== null && !isNaN(e.target.value)) {
-                            props.onEraserSliderChange(Number(e.target.value));
-                        }
-                    }}
                     onSubmit={props.onEraserSliderChange}
                 />
             </div>
diff --git a/src/components/stroke-width-indicator.jsx b/src/components/stroke-width-indicator.jsx
index c7ecb7a2..66b79faa 100644
--- a/src/components/stroke-width-indicator.jsx
+++ b/src/components/stroke-width-indicator.jsx
@@ -3,24 +3,20 @@ import PropTypes from 'prop-types';
 
 import Input from './forms/input.jsx';
 import InputGroup from './input-group/input-group.jsx';
+import LiveInputHOC from './forms/live-input-hoc.jsx';
 
 import {MAX_STROKE_WIDTH} from '../reducers/stroke-width';
 
+const LiveInput = LiveInputHOC(Input);
 const StrokeWidthIndicatorComponent = props => (
     <InputGroup disabled={props.disabled}>
-        <Input
+        <LiveInput
             small
             disabled={props.disabled}
             max={MAX_STROKE_WIDTH}
             min="0"
             type="number"
             value={props.strokeWidth ? props.strokeWidth : 0}
-            onChange={function (e) {
-                if (e.target.value !== null && !isNaN(e.target.value)) {
-                    props.onChangeStrokeWidth(Number(e.target.value));
-                }
-
-            }}
             onSubmit={props.onChangeStrokeWidth}
         />
     </InputGroup>