Skip to content
This repository has been archived by the owner on Jun 3, 2024. It is now read-only.

Fix number inputs for IE11 #730

Merged
merged 9 commits into from
Jan 21, 2020
Merged

Fix number inputs for IE11 #730

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
06ab12e
Manually convert values to numbers.
Jan 13, 2020
79142f9
Update CHANGELOG.
Jan 13, 2020
cb9f69b
Save parseInt and parseFloat values.
Jan 14, 2020
096f013
Use unary plus to convert to number.
Jan 14, 2020
1afbe7e
Merge branch 'dev' into ie11-numeric-input
Marc-Andre-Rivet Jan 21, 2020
24b3b9d
Directly return result of convert.
Jan 21, 2020
21281de
Remove unnecessary wrapper function.
Jan 21, 2020
d6b7230
Update CHANGELOG.md
Jan 21, 2020
2016eba
Merge branch 'dev' into ie11-numeric-input
Marc-Andre-Rivet Jan 21, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
shammamah-zz marked this conversation as resolved.
Show resolved Hide resolved

### 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
Expand Down
15 changes: 12 additions & 3 deletions src/components/Input.react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -89,6 +92,11 @@ export default class Input extends PureComponent {
);
}

getValueAsNumber(value) {
const numericValue = convert(value);
return numericValue % 1 === 0 ? Math.floor(numericValue) : numericValue;
Copy link
Contributor

@Marc-Andre-Rivet Marc-Andre-Rivet Jan 21, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@shammamah Can you explain the reasoning for this line? If n % 1 === 0 isn't it already an integer?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wasn't sure if it would automatically convert to int vs. remaining as a float. Fixed in 24b3b9d.

}

setInputValue(base, value) {
const __value = value;
base = this.input.current.checkValidity() ? convert(base) : NaN;
Expand All @@ -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,
Expand Down