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

(cherry picked from commit 0d20dcf910)

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://github.com/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

@@ -42,6 +42,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);