Description
Do you want to request a feature or report a bug?
Bug
What is the current behavior?
The following code example works well with text input type, but allows inputs like 012 or 0012 to be entered when using the number input type.
The console.log line always runs and shows the right value, and the App state is also correct when checked with React Developer Tools. It's only that the controlled input is not being "controlled" somehow.
class App extends Component {
constructor() {
super()
this.state = {
value: '',
}
}
handleChange = e => {
const value = e.target.value
const num = parseInt(value, 10)
console.log(num)
this.setState({ value: isNaN(num) ? '' : num })
}
render() {
return (
<div className="App">
<input type="number" value={this.state.value} onChange={this.handleChange} />
</div>
)
}
}
Present with latest create react app or in this jsfiddle: https://jsfiddle.net/Lhj0j3ok/
Not present in this jsfiddle: https://jsfiddle.net/mayankshukla5031/08ecc97d/
What is the expected behavior?
Input should reflect the state, thus not allowing strings like 012, etc. to be displayed.
Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
Latest create-react-app:
"react": "15.6.1",
"react-dom": "15.6.1",
"react-scripts": "1.0.11"
Browser: Chrome 60.0.3112.101
OS X 10.12.6
Present with latest create react app or in this jsfiddle: https://jsfiddle.net/Lhj0j3ok/
Not present in this jsfiddle: https://jsfiddle.net/mayankshukla5031/08ecc97d/