Fix 3702 order refunding number input

imports/plugins/core/orders/client/containers/invoiceContainer.js

@@ -182,7 +182,7 @@ class InvoiceContainer extends Component {
       if (refundedQuantity !== 0) {
         editedItems.push(isEdited);
       }
-    } else {
+    } else if (refundedQuantity !== 0) {
       editedItems.push({
         id: lineItem._id,
         title: lineItem.title,

imports/plugins/core/ui/client/components/numericInput/numberTypeInput.js

@@ -21,20 +21,12 @@ class NumberTypeInput extends Component {
       maxValue: props.maxValue || undefined,
       className: {}
     };
-
-    this.handleIncrementButton = this.handleIncrementButton.bind(this);
-    this.handleDecrementButton = this.handleDecrementButton.bind(this);
-    this.handleChange = this.handleChange.bind(this);
   }
 
   handleIncrementButton = (event) => {
     const value = this.state.value + 1;
 
     if (this.state.maxValue && value <= this.state.maxValue) {
-      this.setState({
-        value,
-        className: { edited: true }
-      });
       this.handleChange(event, value);
     }
   }
@@ -43,17 +35,45 @@ class NumberTypeInput extends Component {
     const value = this.state.value - 1;
 
     if (value >= this.state.minValue) {
-      this.setState({
-        value,
-        className: { edited: true }
-      });
       this.handleChange(event, value);
     }
   }
 
   handleChange = (event, value) => {
-    if (this.props.onChange) {
-      this.props.onChange(event, value);
+    let newValue = parseInt(value, 10);
+    const { maxValue, minValue } = this.state;
+
+    // prevent the new value from being
+    // greater or less than the min and max values
+    if (newValue > maxValue) {
+      newValue = maxValue;
+    }
+    if (newValue < minValue) {
+      newValue = minValue;
+    }
+
+    // setting the value state
+    // if a new value set edited css class
+    this.setState({
+      value: newValue,
+      className: { edited: (newValue !== maxValue) }
+    });
+
+    // if props.onChange and the new value is a number
+    if (this.props.onChange && !isNaN(newValue)) {
+      this.props.onChange(event, newValue);
+    }
+  }
+
+  handleBlur = (event) => {
+    const { maxValue } = this.state;
+    // if input is left empty reset
+    // it's value to be the max value
+    if (isNaN(this.state.value)) {
+      this.setState({
+        value: maxValue
+      });
+      this.props.onChange(event, maxValue);
     }
   }
 
@@ -65,13 +85,14 @@ class NumberTypeInput extends Component {
 
     return (
       <div className="rui number-input">
-        <input
+        <Components.TextField
           className={fieldClassName}
-          min={this.state.minValue}
-          max={this.state.maxValue}
-          value={this.state.value}
-          onChange={this.handleChange}
           type="number"
+          onBlur={this.handleBlur}
+          onChange={this.handleChange}
+          maxValue={this.state.maxValue}
+          minValue={this.state.minValue}
+          value={this.state.value}
         />
         <div className="stacked-buttons">
           <Components.Button
@@ -84,6 +105,7 @@ class NumberTypeInput extends Component {
           <Components.Button
             className="button"
             icon="fa fa-chevron-down"
+            disabled={this.state.minValue === this.state.value}
             onClick={this.handleDecrementButton}
           />
         </div>

imports/plugins/core/ui/client/components/textfield/textfield.js

@@ -28,7 +28,12 @@ class TextField extends Component {
     if (this.props.isCurrency && !this.state.isEditing) {
       return (this.state && this.state.value) || this.props.value || "";
     }
-    return this.props.value || "";
+    // if the props.value is not a number
+    // return ether the value or and empty string
+    if (isNaN(this.props.value)) {
+      return this.props.value || "";
+    }
+    return this.props.value;
   }
 
   /**
@@ -182,6 +187,8 @@ class TextField extends Component {
         placeholder={placeholder}
         ref="input"
         type={this.props.type || "text"}
+        min={this.props.minValue}
+        max={this.props.maxValue}
         value={this.value}
         style={this.props.style}
         disabled={this.props.disabled}
@@ -297,6 +304,8 @@ TextField.propTypes = {
   isValid: PropTypes.bool,
   label: PropTypes.string,
   maxRows: PropTypes.number,
+  maxValue: PropTypes.any,
+  minValue: PropTypes.number,
   multiline: PropTypes.bool,
   name: PropTypes.string,
   onBlur: PropTypes.func,

imports/plugins/included/default-theme/client/styles/forms.less

@@ -186,7 +186,8 @@
     text-align: center;
     background-color: #f7f7f7;
     border: solid 1px #cccccc;
-    flex: 1;
+    flex: 0 0 auto;
+    padding: 0;
   }
 
   .edited {