fixed a bug on radio input

facebook#7630
landvibe · Oct 14, 2017 · 4ce1fb0 · 4ce1fb0
1 parent 7687962
commit 4ce1fb0
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 18 deletions.
diff --git a/src/renderers/dom/fiber/ReactDOMFiberComponent.js b/src/renderers/dom/fiber/ReactDOMFiberComponent.js
@@ -810,23 +810,11 @@ var ReactDOMFiberComponent = {
     lastRawProps: Object,
     nextRawProps: Object,
   ): void {
-    var wasCustomComponentTag = isCustomComponent(tag, lastRawProps);
-    var isCustomComponentTag = isCustomComponent(tag, nextRawProps);
-    // Apply the diff.
-    updateDOMProperties(
-      domElement,
-      updatePayload,
-      wasCustomComponentTag,
-      isCustomComponentTag,
-    );
-
     // TODO: Ensure that an update gets scheduled if any of the special props
     // changed.
     switch (tag) {
       case 'input':
-        // Update the wrapper around inputs *after* updating props. This has to
-        // happen after `updateDOMProperties`. Otherwise HTML5 input validations
-        // raise warnings and prevent the new value from being assigned.
+        // Update the wrapper around inputs *after* updating props.
         ReactDOMFiberInput.updateWrapper(domElement, nextRawProps);
 
         // We also check that we haven't missed a value update, such as a
@@ -836,11 +824,21 @@ var ReactDOMFiberComponent = {
       case 'textarea':
         ReactDOMFiberTextarea.updateWrapper(domElement, nextRawProps);
         break;
-      case 'select':
-        // <select> value update needs to occur after <option> children
-        // reconciliation
-        ReactDOMFiberSelect.postUpdateWrapper(domElement, nextRawProps);
-        break;
+    }
+    var wasCustomComponentTag = isCustomComponent(tag, lastRawProps);
+    var isCustomComponentTag = isCustomComponent(tag, nextRawProps);
+    // Apply the diff.
+    updateDOMProperties(
+      domElement,
+      updatePayload,
+      wasCustomComponentTag,
+      isCustomComponentTag,
+    );
+
+    if (tag === 'select') {
+      // <select> value update needs to occur after <option> children
+      // reconciliation
+      ReactDOMFiberSelect.postUpdateWrapper(domElement, nextRawProps);
     }
   },
 

diff --git a/src/renderers/dom/shared/wrappers/__tests__/ReactDOMInput-test.js b/src/renderers/dom/shared/wrappers/__tests__/ReactDOMInput-test.js
@@ -683,6 +683,45 @@ describe('ReactDOMInput', () => {
     expect(cNode.checked).toBe(true);
   });
 
+  it('should have correct checked value when radio names changed', () => {
+    class App extends React.Component {
+      state = {
+        updated: false,
+      };
+      onClick = () => {
+        this.setState({updated: true});
+      };
+      render() {
+        const {updated} = this.state;
+        const radioName = updated ? 'secondName' : 'firstName';
+        return (
+          <div>
+            <button type="button" onClick={this.onClick} />
+            <input
+              type="radio"
+              name={radioName}
+              onChange={emptyFunction}
+              checked={updated === true}
+            />
+            <input
+              type="radio"
+              name={radioName}
+              onChange={emptyFunction}
+              checked={updated === false}
+            />
+          </div>
+        );
+      }
+    }
+
+    var stub = ReactTestUtils.renderIntoDocument(<App />);
+    var buttonNode = ReactDOM.findDOMNode(stub).childNodes[0];
+    var firstRadioNode = ReactDOM.findDOMNode(stub).childNodes[1];
+    expect(firstRadioNode.checked).toBe(false);
+    ReactTestUtils.Simulate.click(buttonNode);
+    expect(firstRadioNode.checked).toBe(true);
+  });
+
   it('should control radio buttons if the tree updates during render', () => {
     var sharedParent = document.createElement('div');
     var container1 = document.createElement('div');