<input type='number' defaultValue={someValue}/> is not working correctly in Chrome

[xiao-hu]

<input type='number' defaultValue={someValue}/> does not work correctly in Chrome. When user type in a decimal point ., the point will disappear and the caret will be be reset to the beginning of the input. If you keep typing in . twice, the value of input will disappear. However, if a input has no defaultValue, it seems to work fine.

I've put together a fiddle page to demo the bug: https://jsfiddle.net/sc3wpujs/2/

I think it has something to do with the internal state management of an uncontrolled component. When the first . is typed, it does not get to target.value (chrome may have trimmed the "unnecessary" . from the value because it's type is number). React pushing target.value back to input causing the . to disappear and caret position reset. Now if two . are typed in, the value is no longer a valid number and Chrome may return '' for target.value, causing the input to be reset.

[kafeltz]

If you use it without ReactJS the behavior is similar. Type some dots with numbers and press up/down arrow keys. I'm not sure how it should be handle to avoid this since natively it disapears too.

[syranide]

#7253 related?

[jimfb]

Yes, duplicate of #7253, root cause is #6556