Fix number inputs for IE11

CHANGELOG.md

@@ -10,6 +10,9 @@ This project adheres to [Semantic Versioning](http://semver.org/).
   - Added responsiveness on graph parent element resize (previously only worked on window.resize)
   - Added new `dash-graph--pending` class to dcc.Graph, present while resizing, (re-)rendering, loading
 
+### Fixed
+- [#731](https://github.com/plotly/dash-core-components/pull/731) Fixed bug in which input components with type `number` did not correctly update their values.
+
 ### Changed
 - [#723](https://github.com/plotly/dash-core-components/pull/723) Changed npm package content to allow source code inclusion from other projects
 - [#725](https://github.com/plotly/dash-core-components/pull/725) Improve async graph performance by parallelizing resource fetching instead of fetching sequentially

src/components/Input.react.js

@@ -28,10 +28,12 @@ export default class Input extends PureComponent {
         this.onKeyPress = this.onKeyPress.bind(this);
         this.setInputValue = this.setInputValue.bind(this);
         this.setPropValue = this.setPropValue.bind(this);
+        this.getValueAsNumber = this.getValueAsNumber.bind(this);
     }
 
     componentWillReceiveProps(nextProps) {
-        const {value, valueAsNumber} = this.input.current;
+        const {value} = this.input.current;
+        const valueAsNumber = this.getValueAsNumber(value);
         this.setInputValue(
             isNil(valueAsNumber) ? value : valueAsNumber,
             nextProps.value
@@ -42,7 +44,8 @@ export default class Input extends PureComponent {
     }
 
     componentDidMount() {
-        const {value, valueAsNumber} = this.input.current;
+        const {value} = this.input.current;
+        const valueAsNumber = this.getValueAsNumber(value);
         this.setInputValue(
             isNil(valueAsNumber) ? value : valueAsNumber,
             this.props.value
@@ -89,6 +92,11 @@ export default class Input extends PureComponent {
         );
     }
 
+    getValueAsNumber(value) {
+        const numericValue = convert(value);
+        return numericValue % 1 === 0 ? Math.floor(numericValue) : numericValue;
+    }
+
     setInputValue(base, value) {
         const __value = value;
         base = this.input.current.checkValidity() ? convert(base) : NaN;
@@ -109,7 +117,8 @@ export default class Input extends PureComponent {
     }
 
     onEvent() {
-        const {value, valueAsNumber} = this.input.current;
+        const {value} = this.input.current;
+        const valueAsNumber = this.getValueAsNumber(value);
         if (this.props.type === 'number') {
             this.setPropValue(
                 this.props.value,