From f18c4c43621e9335e14725156d0c023dc2fb4efc Mon Sep 17 00:00:00 2001
From: Nathan Hunzaker <nate.hunzaker@gmail.com>
Date: Mon, 6 Nov 2017 20:05:37 -0500
Subject: [PATCH] Add DOM test fixture for radio name change issue

---
 .../RadioNameChangeFixture.js                 | 46 +++++++++++++++++++
 .../fixtures/input-change-events/index.js     | 19 ++++++++
 2 files changed, 65 insertions(+)
 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..74b5a19c61392
--- /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 === false}
+          />
+          First Radio
+        </label>
+
+        <label>
+          <input
+            type="radio"
+            name={radioName}
+            onChange={noop}
+            checked={updated === true}
+          />
+          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>
     );
   }