<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
Bug</p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">The following code example works well with <code class="notranslate">text</code> input type, but allows inputs like <code class="notranslate">012</code> or <code class="notranslate">0012</code> to be entered when using the <code class="notranslate">number</code> input type.</p>
<p dir="auto">The <code class="notranslate">console.log</code> 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.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="class App extends Component {
  constructor() {
    super()
    this.state = {
      value: '',
    }
  }

  handleChange = e =&gt; {
    const value = e.target.value
    const num = parseInt(value, 10)
    console.log(num)
    this.setState({ value: isNaN(num) ? '' : num })
  }

  render() {
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;input type=&quot;number&quot; value={this.state.value} onChange={this.handleChange} /&gt;
      &lt;/div&gt;
    )
  }
}"><pre class="notranslate"><code class="notranslate">class App extends Component {
  constructor() {
    super()
    this.state = {
      value: '',
    }
  }

  handleChange = e =&gt; {
    const value = e.target.value
    const num = parseInt(value, 10)
    console.log(num)
    this.setState({ value: isNaN(num) ? '' : num })
  }

  render() {
    return (
      &lt;div className="App"&gt;
        &lt;input type="number" value={this.state.value} onChange={this.handleChange} /&gt;
      &lt;/div&gt;
    )
  }
}
</code></pre></div>
<p dir="auto">Present with latest create react app or in this jsfiddle: <a href="https://jsfiddle.net/Lhj0j3ok/" rel="nofollow">https://jsfiddle.net/Lhj0j3ok/</a><br>
Not present in this jsfiddle: <a href="https://jsfiddle.net/mayankshukla5031/08ecc97d/" rel="nofollow">https://jsfiddle.net/mayankshukla5031/08ecc97d/</a></p>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
Input should reflect the state, thus not allowing strings like <code class="notranslate">012</code>, etc. to be displayed.</p>
<p dir="auto"><strong>Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?</strong></p>
<p dir="auto">Latest <code class="notranslate">create-react-app</code>:<br>
"react": "15.6.1",<br>
"react-dom": "15.6.1",<br>
"react-scripts": "1.0.11"</p>
<p dir="auto">Browser: Chrome 60.0.3112.101<br>
OS X 10.12.6</p>
<p dir="auto">Present with latest create react app or in this jsfiddle: <a href="https://jsfiddle.net/Lhj0j3ok/" rel="nofollow">https://jsfiddle.net/Lhj0j3ok/</a><br>
Not present in this jsfiddle: <a href="https://jsfiddle.net/mayankshukla5031/08ecc97d/" rel="nofollow">https://jsfiddle.net/mayankshukla5031/08ecc97d/</a></p>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
bug</p>
<p dir="auto"><strong>What is the current behavior?</strong><br>
I have a number input with defalut value 0 and in onChange function I'll parse value to float to avoid invalid input, but I'll always get left pad 0 on input UI. But in previouse version, my code works.</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via <a href="https://jsfiddle.net" rel="nofollow">https://jsfiddle.net</a> or similar (template: <a href="https://jsfiddle.net/84v837e9/" rel="nofollow">https://jsfiddle.net/84v837e9/</a>).</strong><br>
&lt;input type="number" value={this.state.value} onChange={e=&gt;this.setState({value: parseFloat(e.target.value)? parseFloat(e.target.value) : 0})}</p>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
Should not have left pad 0.</p>
<p dir="auto"><strong>Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?</strong><br>
react 15.5.3, all browser / all OS. It works in 15.4.2</p>