<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
Report a bug</p>
<p dir="auto"><strong>What is the current behavior?</strong><br>
When using a number input that has a defaultValue, you cannot enter a decimal value. When attempting to type a decimal, the cursor is moved to the beginning of the input. This behavior is <em>not</em> observed when there is no defaultValue given.</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/reactjs/69z2wepo/" rel="nofollow">https://jsfiddle.net/reactjs/69z2wepo/</a>).</strong><br>
<a href="https://jsfiddle.net/zc0x3egz/" rel="nofollow">https://jsfiddle.net/zc0x3egz/</a></p>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
The input should allow you to type a decimal.</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>
This is happening with React 15.3.2. It does <em>not</em> happen in 0.14.x</p>
<p dir="auto">This appears to have been introduced in a new Chrome version, but I can't find any reference to where.</p>
<p dir="auto">Affected/Tested Browsers (OS X):</p>
<ul dir="auto">
<li>Chrome 51.0.2704.106 (64-bit)</li>
<li>Opera 39.0.2256.15</li>
</ul>
<p dir="auto">Unaffected Browsers:</p>
<ul dir="auto">
<li>Safari 9.1</li>
<li>Firefox 49</li>
</ul>
<p dir="auto">Backspacing in an input element with <code class="notranslate">value</code> or <code class="notranslate">defaultValue</code> set causes some very odd behavior. Once a decimal point is gone, it can't easily be re-added.</p>
<p dir="auto">Example:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/1197375/16786390/1d722fd4-485a-11e6-8969-780d4e4e9752.gif"><img src="https://cloud.githubusercontent.com/assets/1197375/16786390/1d722fd4-485a-11e6-8969-780d4e4e9752.gif" alt="react-input-bug" data-animated-image="" style="max-width: 100%;"></a></p>
<p dir="auto">In this example, I simply backspaced twice. On the second backspace, when I expect <code class="notranslate">3.</code> to be showing, the input instead reads <code class="notranslate">3</code> and the cursor has moved to the beginning. The next two jumps are my attempts to add another decimal point.</p>
<p dir="auto">Fiddle: <a href="https://jsfiddle.net/kmqz6kw8/" rel="nofollow">https://jsfiddle.net/kmqz6kw8/</a></p>
<p dir="auto">Tested with React 15.2.</p>
<p dir="auto">Notes: This only occurs when <code class="notranslate">value</code> or <code class="notranslate">defaultValue</code> is set. If neither is set, the input behaves properly. We are currently working around this issue by (unfortunately) setting the input value on <code class="notranslate">componentDidMount</code> via a ref.</p>