Fix for #169 using min and max values in Input component

dash_core_components/Input.py

@@ -15,7 +15,7 @@ class Input(Component):
 - id (string; optional): The ID of this component, used to identify dash components
 in callbacks. The ID needs to be unique across all of the
 components in an app.
-- value (string; optional): The value of the input
+- value (string | number; optional): The value of the input
 - style (dict; optional): The input's inline styles
 - className (string; optional): The class of the input element
 - type (a value equal to: "text", 'number', 'password', 'email', 'range', 'search', 'tel', 'url', 'hidden'; optional): The type of control to render.
@@ -29,9 +29,9 @@ class Input(Component):
 input element.
 This attribute is ignored when the type attribute's value is
 hidden, checkbox, radio, file, or a button type.
-- max (string; optional): The maximum (numeric or date-time) value for this item, which must not be less than its minimum (min attribute) value.
+- max (string | number; optional): The maximum (numeric or date-time) value for this item, which must not be less than its minimum (min attribute) value.
 - maxlength (string; optional): If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the maximum number of characters (in UTF-16 code units) that the user can enter. For other control types, it is ignored. It can exceed the value of the size attribute. If it is not specified, the user can enter an unlimited number of characters. Specifying a negative number results in the default behavior (i.e. the user can enter an unlimited number of characters). The constraint is evaluated only when the value of the attribute has been changed.
-- min (string; optional): The minimum (numeric or date-time) value for this item, which must not be greater than its maximum (max attribute) value.
+- min (string | number; optional): The minimum (numeric or date-time) value for this item, which must not be greater than its maximum (max attribute) value.
 - minlength (string; optional): If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the minimum number of characters (in Unicode code points) that the user can enter. For other control types, it is ignored.
 - multiple (boolean; optional): This Boolean attribute indicates whether the user can enter more than one value. This attribute applies when the type attribute is set to email or file, otherwise it is ignored.
 - name (string; optional): The name of the control, which is submitted with the form data.

dash_core_components/metadata.json

@@ -1521,7 +1521,15 @@
       },
       "value": {
         "type": {
-          "name": "string"
+          "name": "union",
+          "value": [
+            {
+              "name": "string"
+            },
+            {
+              "name": "number"
+            }
+          ]
         },
         "required": false,
         "description": "The value of the input"
@@ -1668,7 +1676,15 @@
       },
       "max": {
         "type": {
-          "name": "string"
+          "name": "union",
+          "value": [
+            {
+              "name": "string"
+            },
+            {
+              "name": "number"
+            }
+          ]
         },
         "required": false,
         "description": "The maximum (numeric or date-time) value for this item, which must not be less than its minimum (min attribute) value."
@@ -1682,7 +1698,15 @@
       },
       "min": {
         "type": {
-          "name": "string"
+          "name": "union",
+          "value": [
+            {
+              "name": "string"
+            },
+            {
+              "name": "number"
+            }
+          ]
         },
         "required": false,
         "description": "The minimum (numeric or date-time) value for this item, which must not be greater than its maximum (max attribute) value."

src/components/Input.react.js

@@ -12,7 +12,7 @@ import {omit} from 'ramda';
 export default class Input extends Component {
     constructor(props) {
         super(props);
-        if(!props.setProps) {
+        if (!props.setProps) {
             this.state = {value: props.value};
         }
     }
@@ -24,19 +24,23 @@ export default class Input extends Component {
     }
 
     render() {
-        const {fireEvent, setProps, type} = this.props;
+        const {fireEvent, setProps, type, min, max} = this.props;
         const {value} = setProps ? this.props : this.state;
         return (
             <input
                 onChange={e => {
+                    const newValue = e.target.value;
+                    if (((min || max) && newValue < min) || newValue > max) {
+                        return;
+                    }
                     if (setProps) {
                         if (type === 'number') {
-                            setProps({value: Number(e.target.value)});
+                            setProps({value: Number(newValue)});
                         } else {
-                            setProps({value: e.target.value});
+                            setProps({value: newValue});
                         }
                     } else {
-                        this.setState({value: e.target.value});
+                        this.setState({value: newValue});
                     }
                     if (fireEvent) {
                         fireEvent({event: 'change'});
@@ -62,7 +66,21 @@ export default class Input extends Component {
                     }
                 }}
                 value={value}
-                {...omit(['fireEvent', 'setProps', 'value'], this.props)}
+                {...omit(
+                    [
+                        'fireEvent',
+                        'setProps',
+                        'value',
+                        'n_blur',
+                        'n_blur_timestamp',
+                        'n_submit',
+                        'n_submit_timestamp',
+                        'selectionDirection',
+                        'selectionEnd',
+                        'selectionStart',
+                    ],
+                    this.props
+                )}
             />
         );
     }
@@ -86,7 +104,7 @@ Input.propTypes = {
     /**
      * The value of the input
      */
-    value: PropTypes.string,
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
     /**
      * The input's inline styles
@@ -199,7 +217,7 @@ Input.propTypes = {
     /**
      * The maximum (numeric or date-time) value for this item, which must not be less than its minimum (min attribute) value.
      */
-    max: PropTypes.string,
+    max: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
     /**
      * If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the maximum number of characters (in UTF-16 code units) that the user can enter. For other control types, it is ignored. It can exceed the value of the size attribute. If it is not specified, the user can enter an unlimited number of characters. Specifying a negative number results in the default behavior (i.e. the user can enter an unlimited number of characters). The constraint is evaluated only when the value of the attribute has been changed.
@@ -209,7 +227,7 @@ Input.propTypes = {
     /**
      * The minimum (numeric or date-time) value for this item, which must not be greater than its maximum (max attribute) value.
      */
-    min: PropTypes.string,
+    min: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
     /**
      * If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the minimum number of characters (in Unicode code points) that the user can enter. For other control types, it is ignored.

test/unit/Input.test.js

@@ -159,3 +159,102 @@ describe('Input with setProps() defined', () => {
         expect(input.find('input').getNode().value).toEqual('new value');
     });
 });
+
+describe('Input with type=number', () => {
+    describe('Without setProps(), using this.state', () => {
+        describe('with min and max props', () => {
+            let input;
+            const props = {
+                value: 0,
+                min: 0,
+                max: 2,
+            };
+            beforeEach(() => {
+                input = mount(<Input type="number" {...props} />);
+            });
+            test('Input can not be updated lower than props.min', () => {
+                input
+                    .find('input')
+                    .simulate('change', {target: {value: props.min - 1}});
+                expect(Number(input.find('input').getNode().value)).toEqual(
+                    props.value
+                );
+            });
+            test('Input can not be updated higher than props.max', () => {
+                input
+                    .find('input')
+                    .simulate('change', {target: {value: props.max + 1}});
+                expect(Number(input.find('input').getNode().value)).toEqual(
+                    props.value
+                );
+            });
+        });
+        describe('without min and max props', () => {
+            let input;
+            beforeEach(() => {
+                input = mount(<Input type="number" value={0} />);
+            });
+            test('Input can be updated', () => {
+                input.find('input').simulate('change', {target: {value: -1}});
+                expect(Number(input.find('input').getNode().value)).toEqual(-1);
+                input.find('input').simulate('change', {target: {value: 100}});
+                expect(Number(input.find('input').getNode().value)).toEqual(
+                    100
+                );
+            });
+        });
+    });
+    describe('With setProps', () => {
+        describe('with min and max props', () => {
+            let mockSetProps, input;
+            const props = {
+                value: 0,
+                min: 0,
+                max: 2,
+            };
+            beforeEach(() => {
+                mockSetProps = jest.fn();
+                input = mount(
+                    <Input type="number" {...props} setProps={mockSetProps} />
+                );
+            });
+            test('Input can not be updated lower than props.min', () => {
+                input
+                    .find('input')
+                    .simulate('change', {target: {value: props.min - 1}});
+
+                // if the target value is lower than min, don't even call setProps
+                expect(mockSetProps.mock.calls.length).toEqual(0);
+                // input's value should remain the same
+                expect(Number(input.find('input').getNode().value)).toEqual(
+                    0
+                );
+            });
+            test('Input can not be updated higher than props.max', () => {
+                input
+                    .find('input')
+                    .simulate('change', {target: {value: props.max + 1}});
+                // if the target value is higher than max, don't even call setProps
+                expect(mockSetProps.mock.calls.length).toEqual(0);
+                // input's value should remain the same
+                expect(Number(input.find('input').getNode().value)).toEqual(
+                    0
+                );
+            });
+        });
+        describe('without min and max props', () => {
+            let mockSetProps, input;
+            beforeEach(() => {
+                mockSetProps = jest.fn();
+                input = mount(
+                    <Input type="number" value={0} setProps={mockSetProps} />
+                );
+            });
+            test('Input can updated normally', () => {
+                input.find('input').simulate('change', {target: {value: 100}});
+                expect(mockSetProps.mock.calls.length).toEqual(1);
+                expect(mockSetProps.mock.calls[0][0]).toEqual({value: 100});
+            });
+        });
+    });
+});