From 4ce1fb0b3d88fe24c5072bf0bcdb92691895478f Mon Sep 17 00:00:00 2001
From: landvibe <landvibe@landvibeui-iMac.local>
Date: Sat, 14 Oct 2017 19:47:55 +0900
Subject: [PATCH 1/6] fixed a bug on radio input
 https://github.com/facebook/react/issues/7630

---
 .../dom/fiber/ReactDOMFiberComponent.js       | 34 ++++++++--------
 .../wrappers/__tests__/ReactDOMInput-test.js  | 39 +++++++++++++++++++
 2 files changed, 55 insertions(+), 18 deletions(-)

diff --git a/src/renderers/dom/fiber/ReactDOMFiberComponent.js b/src/renderers/dom/fiber/ReactDOMFiberComponent.js
index a98800329222b..c02364eaea5e6 100644
--- 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
index 0e289c0d80f2a..abc5d21ab0e13 100644
--- 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');

From 6f3a0006c90f9923ed948d298ab07e417064141a Mon Sep 17 00:00:00 2001
From: landvibe <landvibe@landvibeui-iMac.local>
Date: Sat, 28 Oct 2017 00:18:32 +0900
Subject: [PATCH 2/6] roll back previous commit make radio's checked updated
 before the name

---
 .../src/client/ReactDOMFiberComponent.js      | 39 +++++++++++--------
 .../src/client/ReactDOMFiberInput.js          | 27 +++++++++----
 2 files changed, 42 insertions(+), 24 deletions(-)

diff --git a/packages/react-dom/src/client/ReactDOMFiberComponent.js b/packages/react-dom/src/client/ReactDOMFiberComponent.js
index 3f21bcb8d8fa9..edc318496e6ca 100644
--- a/packages/react-dom/src/client/ReactDOMFiberComponent.js
+++ b/packages/react-dom/src/client/ReactDOMFiberComponent.js
@@ -814,11 +814,28 @@ var ReactDOMFiberComponent = {
     lastRawProps: Object,
     nextRawProps: Object,
   ): void {
+    // Update checked *before* name.
+    // In the middle of an update, it is possible to have multiple checked.
+    // When a checked radio tries to change name, browser makes another radio's checked false.
+    if (tag === 'input') {
+      ReactDOMFiberInput.updateChecked(domElement, nextRawProps, 'radio');
+    }
     // TODO: Ensure that an update gets scheduled if any of the special props
     // changed.
+    var wasCustomComponentTag = isCustomComponent(tag, lastRawProps);
+    var isCustomComponentTag = isCustomComponent(tag, nextRawProps);
+    // Apply the diff.
+    updateDOMProperties(
+      domElement,
+      updatePayload,
+      wasCustomComponentTag,
+      isCustomComponentTag,
+    );
     switch (tag) {
       case 'input':
-        // Update the wrapper around inputs *after* updating props.
+        // 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.
         ReactDOMFiberInput.updateWrapper(domElement, nextRawProps);
 
         // We also check that we haven't missed a value update, such as a
@@ -828,21 +845,11 @@ var ReactDOMFiberComponent = {
       case 'textarea':
         ReactDOMFiberTextarea.updateWrapper(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);
+      case 'select':
+        // <select> value update needs to occur after <option> children
+        // reconciliation
+        ReactDOMFiberSelect.postUpdateWrapper(domElement, nextRawProps);
+        break;
     }
   },
 
diff --git a/packages/react-dom/src/client/ReactDOMFiberInput.js b/packages/react-dom/src/client/ReactDOMFiberInput.js
index 89f1056bc4103..cc4109e7f737b 100644
--- a/packages/react-dom/src/client/ReactDOMFiberInput.js
+++ b/packages/react-dom/src/client/ReactDOMFiberInput.js
@@ -144,6 +144,24 @@ var ReactDOMInput = {
     };
   },
 
+  updateChecked: function(
+    element: Element,
+    props: Object,
+    targetType: ?string,
+  ) {
+    var node = ((element: any): InputWithWrapperState);
+    if (!targetType || targetType === node.type) {
+      var checked = props.checked;
+      if (checked != null) {
+        DOMPropertyOperations.setValueForProperty(
+          node,
+          'checked',
+          checked || false,
+        );
+      }
+    }
+  },
+
   updateWrapper: function(element: Element, props: Object) {
     var node = ((element: any): InputWithWrapperState);
     if (__DEV__) {
@@ -183,14 +201,7 @@ var ReactDOMInput = {
       }
     }
 
-    var checked = props.checked;
-    if (checked != null) {
-      DOMPropertyOperations.setValueForProperty(
-        node,
-        'checked',
-        checked || false,
-      );
-    }
+    ReactDOMInput.updateChecked(element, props);
 
     var value = props.value;
     if (value != null) {

From aad2f6424dd9f31f56127ff69df9398339b0b30f Mon Sep 17 00:00:00 2001
From: landvibe <landvibe@landvibeui-iMac.local>
Date: Sat, 28 Oct 2017 00:20:24 +0900
Subject: [PATCH 3/6] moved comment

---
 packages/react-dom/src/client/ReactDOMFiberComponent.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/react-dom/src/client/ReactDOMFiberComponent.js b/packages/react-dom/src/client/ReactDOMFiberComponent.js
index edc318496e6ca..cc596ae8250f2 100644
--- a/packages/react-dom/src/client/ReactDOMFiberComponent.js
+++ b/packages/react-dom/src/client/ReactDOMFiberComponent.js
@@ -820,8 +820,7 @@ var ReactDOMFiberComponent = {
     if (tag === 'input') {
       ReactDOMFiberInput.updateChecked(domElement, nextRawProps, 'radio');
     }
-    // TODO: Ensure that an update gets scheduled if any of the special props
-    // changed.
+
     var wasCustomComponentTag = isCustomComponent(tag, lastRawProps);
     var isCustomComponentTag = isCustomComponent(tag, nextRawProps);
     // Apply the diff.
@@ -831,6 +830,8 @@ var ReactDOMFiberComponent = {
       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

From 25c0fc471e0597f1c7663d0425bf07793821f40b Mon Sep 17 00:00:00 2001
From: landvibe <landvibe@landvibeui-iMac.local>
Date: Tue, 7 Nov 2017 17:15:46 +0900
Subject: [PATCH 4/6] added a fixture for radio bug

---
 .../RadioNameChangeFixture.js                 | 46 +++++++++++++++++++
 .../fixtures/input-change-events/index.js     | 19 ++++++++
 .../src/__tests__/ReactDOMInput-test.js       |  2 +-
 .../src/client/ReactDOMFiberInput.js          |  6 +--
 4 files changed, 67 insertions(+), 6 deletions(-)
 create mode 100644 fixtures/dom/src/components/fixtures/input-change-events/RadioNameChangeFixture.js

diff --git a/fixtures/dom/src/components/fixtures/input-change-events/RadioNameChangeFixture.js b/fixtures/dom/src/components/fixtures/input-change-events/RadioNameChangeFixture.js
new file mode 100644
index 0000000000000..d2aff2246dc4c
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/input-change-events/RadioNameChangeFixture.js
@@ -0,0 +1,46 @@
+const React = window.React;
+const noop = n => n;
+
+class RadioNameChangeFixture extends React.Component {
+  state = {
+    updated: false,
+  };
+  onClick = () => {
+    this.setState(state => {
+      return { updated: !state.updated };
+    });
+  };
+  render() {
+    const { updated } = this.state;
+    const radioName = updated ? 'firstName' : 'secondName';
+    return (
+      <div>
+        <label>
+          <input
+            type="radio"
+            name={radioName}
+            onChange={noop}
+            checked={updated === true}
+          />
+          First Radio
+        </label>
+
+        <label>
+          <input
+            type="radio"
+            name={radioName}
+            onChange={noop}
+            checked={updated === false}
+          />
+          Second Radio
+        </label>
+
+        <div>
+          <button type="button" onClick={this.onClick}>Toggle</button>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default RadioNameChangeFixture;
diff --git a/fixtures/dom/src/components/fixtures/input-change-events/index.js b/fixtures/dom/src/components/fixtures/input-change-events/index.js
index 41920e5802403..70764989627aa 100644
--- a/fixtures/dom/src/components/fixtures/input-change-events/index.js
+++ b/fixtures/dom/src/components/fixtures/input-change-events/index.js
@@ -5,6 +5,7 @@ import TestCase from '../../TestCase';
 import RangeKeyboardFixture from './RangeKeyboardFixture';
 import RadioClickFixture from './RadioClickFixture';
 import RadioGroupFixture from './RadioGroupFixture';
+import RadioNameChangeFixture from './RadioNameChangeFixture';
 import InputPlaceholderFixture from './InputPlaceholderFixture';
 
 class InputChangeEvents extends React.Component {
@@ -87,6 +88,24 @@ class InputChangeEvents extends React.Component {
 
           <InputPlaceholderFixture />
         </TestCase>
+        <TestCase
+          title="Radio button groups with name changes"
+          description={`
+            A radio button group should have correct checked value when
+            the names changes
+          `}
+          resolvedBy="#11227"
+          affectedBrowsers="IE9+">
+          <TestCase.Steps>
+            <li>Click the toggle button</li>
+          </TestCase.Steps>
+
+          <TestCase.ExpectedResult>
+            The checked radio button should switch between the first and second radio button
+          </TestCase.ExpectedResult>
+
+          <RadioNameChangeFixture />
+        </TestCase>
       </FixtureSet>
     );
   }
diff --git a/packages/react-dom/src/__tests__/ReactDOMInput-test.js b/packages/react-dom/src/__tests__/ReactDOMInput-test.js
index efbeae75f4f2e..31d1a3abda1d9 100644
--- a/packages/react-dom/src/__tests__/ReactDOMInput-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMInput-test.js
@@ -669,7 +669,7 @@ describe('ReactDOMInput', () => {
     expect(cNode.checked).toBe(true);
   });
 
-  it('should have correct checked value when radio names changed', () => {
+  it('should check the correct radio when the selected name moves', () => {
     class App extends React.Component {
       state = {
         updated: false,
diff --git a/packages/react-dom/src/client/ReactDOMFiberInput.js b/packages/react-dom/src/client/ReactDOMFiberInput.js
index db713320464cd..f290e3e53f269 100644
--- a/packages/react-dom/src/client/ReactDOMFiberInput.js
+++ b/packages/react-dom/src/client/ReactDOMFiberInput.js
@@ -153,11 +153,7 @@ export function updateChecked(
   if (!targetType || targetType === node.type) {
     var checked = props.checked;
     if (checked != null) {
-      DOMPropertyOperations.setValueForProperty(
-        node,
-        'checked',
-        checked || false,
-      );
+      DOMPropertyOperations.setValueForProperty(node, 'checked', checked);
     }
   }
 }

From e03b117792a48b9e591d443569d15e486b5b4321 Mon Sep 17 00:00:00 2001
From: landvibe <landvibe@landvibeui-iMac.local>
Date: Tue, 7 Nov 2017 17:31:59 +0900
Subject: [PATCH 5/6] fixed prettier error

---
 .../fixtures/input-change-events/RadioNameChangeFixture.js    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/fixtures/dom/src/components/fixtures/input-change-events/RadioNameChangeFixture.js b/fixtures/dom/src/components/fixtures/input-change-events/RadioNameChangeFixture.js
index d2aff2246dc4c..1169c61c2d77f 100644
--- a/fixtures/dom/src/components/fixtures/input-change-events/RadioNameChangeFixture.js
+++ b/fixtures/dom/src/components/fixtures/input-change-events/RadioNameChangeFixture.js
@@ -7,11 +7,11 @@ class RadioNameChangeFixture extends React.Component {
   };
   onClick = () => {
     this.setState(state => {
-      return { updated: !state.updated };
+      return {updated: !state.updated};
     });
   };
   render() {
-    const { updated } = this.state;
+    const {updated} = this.state;
     const radioName = updated ? 'firstName' : 'secondName';
     return (
       <div>

From 9ee15eb252132dce0777f0e5393cac1a0d3736d7 Mon Sep 17 00:00:00 2001
From: landvibe <landvibe@landvibeui-iMac.local>
Date: Tue, 14 Nov 2017 08:31:42 +0900
Subject: [PATCH 6/6] read type from props, not node

---
 .../react-dom/src/client/ReactDOMFiberComponent.js |  8 ++++++--
 .../react-dom/src/client/ReactDOMFiberInput.js     | 14 ++++----------
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/packages/react-dom/src/client/ReactDOMFiberComponent.js b/packages/react-dom/src/client/ReactDOMFiberComponent.js
index 8f2c659e31618..c77e29a4d63c6 100644
--- a/packages/react-dom/src/client/ReactDOMFiberComponent.js
+++ b/packages/react-dom/src/client/ReactDOMFiberComponent.js
@@ -774,8 +774,12 @@ export function updateProperties(
   // Update checked *before* name.
   // In the middle of an update, it is possible to have multiple checked.
   // When a checked radio tries to change name, browser makes another radio's checked false.
-  if (tag === 'input') {
-    ReactDOMFiberInput.updateChecked(domElement, nextRawProps, 'radio');
+  if (
+    tag === 'input' &&
+    nextRawProps.type === 'radio' &&
+    nextRawProps.name != null
+  ) {
+    ReactDOMFiberInput.updateChecked(domElement, nextRawProps);
   }
 
   var wasCustomComponentTag = isCustomComponent(tag, lastRawProps);
diff --git a/packages/react-dom/src/client/ReactDOMFiberInput.js b/packages/react-dom/src/client/ReactDOMFiberInput.js
index f290e3e53f269..7ddc36ee0c892 100644
--- a/packages/react-dom/src/client/ReactDOMFiberInput.js
+++ b/packages/react-dom/src/client/ReactDOMFiberInput.js
@@ -144,17 +144,11 @@ export function initWrapperState(element: Element, props: Object) {
   };
 }
 
-export function updateChecked(
-  element: Element,
-  props: Object,
-  targetType: ?string,
-) {
+export function updateChecked(element: Element, props: Object) {
   var node = ((element: any): InputWithWrapperState);
-  if (!targetType || targetType === node.type) {
-    var checked = props.checked;
-    if (checked != null) {
-      DOMPropertyOperations.setValueForProperty(node, 'checked', checked);
-    }
+  var checked = props.checked;
+  if (checked != null) {
+    DOMPropertyOperations.setValueForProperty(node, 'checked', checked);
   }
 }