<p dir="auto"><code class="notranslate">&lt;input type='number' defaultValue={someValue}/&gt;</code> does not work correctly in Chrome. When user type in a decimal point <code class="notranslate">.</code>, the point will disappear and the caret will be be reset to the beginning of the input. If you keep typing in <code class="notranslate">.</code> twice, the value of input will disappear. However, if a input has no defaultValue, it seems to work fine.</p>
<p dir="auto">I've put together a fiddle page to demo the bug: <a href="https://jsfiddle.net/sc3wpujs/2/" rel="nofollow">https://jsfiddle.net/sc3wpujs/2/</a></p>
<p dir="auto">I think it has something to do with the internal state management of an uncontrolled component. When the first <code class="notranslate">.</code> is typed, it does not get to <code class="notranslate">target.value</code> (chrome may have trimmed the "unnecessary" <code class="notranslate">.</code> from the value because it's type is <code class="notranslate">number</code>). React pushing <code class="notranslate">target.value</code> back to input causing the <code class="notranslate">.</code> to disappear and caret position reset. Now if two <code class="notranslate">.</code> are typed in, the value is no longer a valid number and Chrome may return <code class="notranslate">''</code> for <code class="notranslate">target.value</code>, causing the input to be reset.</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>