Fix uncontrolled input decimal point "chopping" on number inputs, and…

… validation warnings on email inputs (#7750)

* Only assign defaultValue if it has changed.

* Improve comment about reason for defaultValue conditional assignment

src/renderers/dom/client/wrappers/ReactDOMInput.js

@@ -213,7 +213,17 @@ var ReactDOMInput = {
  }
  } else {
  if (props.value == null && props.defaultValue != null) {
- node.defaultValue = '' + props.defaultValue;
+ // In Chrome, assigning defaultValue to certain input types triggers input validation.
+ // For number inputs, the display value loses trailing decimal points. For email inputs,
+ // Chrome raises "The specified value <x> is not a valid email address".
+ //
+ // Here we check to see if the defaultValue has actually changed, avoiding these problems
+ // when the user is inputting text
+ //
+ // https:/facebook/react/issues/7253
+ if (node.defaultValue !== '' + props.defaultValue) {
+ node.defaultValue = '' + props.defaultValue;
+ }
  }
  if (props.checked == null && props.defaultChecked != null) {
  node.defaultChecked = !!props.defaultChecked;

src/renderers/dom/client/wrappers/__tests__/ReactDOMInput-test.js

@@ -51,6 +51,28 @@ describe('ReactDOMInput', () => {
  expect(node.value).toBe('0');
  });
 
+ it('only assigns defaultValue if it changes', () => {
+ class Test extends React.Component {
+ render() {
+ return (<input defaultValue="0" />);
+ }
+ }
+
+ var component = ReactTestUtils.renderIntoDocument(<Test />);
+ var node = ReactDOM.findDOMNode(component);
+
+ Object.defineProperty(node, 'defaultValue', {
+ get() {
+ return '0';
+ },
+ set(value) {
+ throw new Error(`defaultValue was assigned ${value}, but it did not change!`);
+ },
+ });
+
+ component.forceUpdate();
+ });
+
  it('should display "true" for `defaultValue` of `true`', () => {
  var stub = <input type="text" defaultValue={true} />;
  stub = ReactTestUtils.renderIntoDocument(stub);