fixes plotly/dash-core_components#169

src/components/Input.react.js

@@ -1,6 +1,21 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import {omit} from 'ramda';
+import {omit, contains} from 'ramda';
+
+/**
+ * A function to handle the formating of the `value` prop of the react `input`.
+ * @param {string} val the `value` prop of the react `input` component.
+ * @param {string} type the `type` prop of the react `input` component.
+ * @returns {string} a value formated as a number if `type` is equal to `number`
+ */
+function formatValue(val, type) {
+    if (!val === '') {
+        if (type === 'number') {
+            return Number(val);
+        }
+    }
+    return val;
+}
 
 /**
  * A basic HTML input control for entering text, numbers, or passwords.
@@ -12,39 +27,85 @@ import {omit} from 'ramda';
 export default class Input extends Component {
     constructor(props) {
         super(props);
-        this.state = {value: props.value};
+        this.state = {
+            value: formatValue(props.value, props.type),
+        };
     }
 
     componentWillReceiveProps(nextProps) {
-        this.setState({value: nextProps.value});
+        this.setState({value: formatValue(nextProps.value, nextProps.type)});
     }
 
     render() {
-        const {
-            fireEvent,
-            setProps,
-            type
-        } = this.props;
+        const {fireEvent, setProps, type, updatemode} = this.props;
+
         const {value} = this.state;
         return (
             <input
+                onBlur={() => {
+                    const newValue = formatValue(this.state.value, type);
+                    if (updatemode === 'blur' || contains('blur', updatemode)) {
+                        this.setState({value: newValue});
+                        if (setProps) {
+                            setProps({value: newValue});
+                        }
+                        if (fireEvent) {
+                            fireEvent({event: 'blur'});
+                        }
+                    }
+                }}
                 onChange={e => {
-                    this.setState({value: e.target.value});
-                    if (setProps) {
-                        if (type === 'number') {
-                            setProps({value: Number(e.target.value)});
+                    const newValue = formatValue(e.target.value, type);
+                    this.setState({value: newValue});
+                    if (
+                        updatemode === 'keypress' ||
+                        contains('keypress', updatemode)
+                    ) {
+                        if (setProps) {
+                            setProps({value: newValue});
+                        }
+                    }
+                    if (fireEvent) {
+                        fireEvent({event: 'change'});
+                    }
+                }}
+                onKeyPress={e => {
+                    if (type === 'number') {
+                        const curVal = this.state.value;
+                        const keyCode = e.keyCode || e.which;
+                        const keyValue = String.fromCharCode(keyCode);
+                        const unicodePlus = 43;
+                        const unicodeNine = 57;
+                        if (
+                            keyCode <= unicodePlus ||
+                            keyCode > unicodeNine ||
+                            keyValue === '/'
+                        ) {
+                            e.preventDefault();
                         }
-                        else {
-                            setProps({value: e.target.value});
+                        if (keyValue === '-' && curVal.length > 0) {
+                            e.preventDefault();
+                        }
+                        if (
+                            (keyValue === '.' || keyValue === ',') &&
+                            /[.]|,/.test(curVal)
+                        ) {
+                            e.preventDefault();
                         }
                     }
-                    if (fireEvent) {fireEvent({event: 'change'});}
                 }}
-                onBlur={() => {
-                    if (fireEvent) {fireEvent({event: 'blur'});}
+                onClick={e => {
+                    const newValue = formatValue(e.target.value, type);
+                    this.setState({value: newValue});
+                    if (setProps) {
+                        setProps({value: newValue});
+                    }
                 }}
                 value={value}
-                {...omit(['fireEvent', 'setProps', 'value'], this.props)}
+                {...omit(
+                    ['fireEvent', 'setProps', 'value', 'updatemode'],
+                    this.props
+                )}
             />
         );
     }
@@ -78,7 +139,15 @@ Input.propTypes = {
      */
     type: PropTypes.oneOf([
         // Only allowing the input types with wide browser compatability
-        'text', 'number', 'password', 'email', 'range', 'search', 'tel', 'url', 'hidden'
+        'text',
+        'number',
+        'password',
+        'email',
+        'range',
+        'search',
+        'tel',
+        'url',
+        'hidden',
     ]),
 
     /**
@@ -150,7 +219,7 @@ Input.propTypes = {
         /**
          * URL input. Use type="url" if possible instead.
          */
-        'url'
+        'url',
     ]),
 
     /**
@@ -173,7 +242,6 @@ Input.propTypes = {
      */
     maxlength: PropTypes.string,
 
-
     /**
      * The minimum (numeric or date-time) value for this item, which must not be greater than its maximum (max attribute) value.
      */
@@ -244,6 +312,25 @@ Input.propTypes = {
      */
     step: PropTypes.string,
 
+    /**
+     *  Sets the number of important digits. It can be the string any or a positive floating point number. If this attribute is not set to any, the default is zero.
+     */
+    precision: PropTypes.string,
+
+    /**
+     * Determines when the component should update
+     * its value. If `keypress`, then the input
+     * will trigger its value when the user presses on
+     * a key while the selector is active inside the input.
+     * If `blur`, then the input will trigger its value when
+     * the user click outside the input zone or press tab.
+     * If `enter` ...
+     */
+    updatemode: PropTypes.oneOfType([
+        PropTypes.oneOf(['keypress', 'blur', 'enter']),
+        PropTypes.arrayOf(PropTypes.oneOf(['keypress', 'blur', 'enter'])),
+    ]),
+
     /**
      * Dash-assigned callback that gets fired when the input changes.
      */
@@ -254,5 +341,10 @@ Input.propTypes = {
      */
     setProps: PropTypes.func,
 
-    dashEvents: PropTypes.oneOf(['blur', 'change'])
+    dashEvents: PropTypes.oneOf(['blur', 'change']),
+};
+
+Input.defaultProps = {
+    type: 'text',
+    updatemode: 'keypress',
 };