From 7911335f21a211c209d0f4d2f9025cee1615d910 Mon Sep 17 00:00:00 2001
From: Michael Ridgway <mridgway@netflix.com>
Date: Tue, 19 Jun 2018 22:05:13 -0700
Subject: [PATCH 1/6] Fixes children when using dangerouslySetInnerHtml in a
 selected <option>

This fixes an inadvertent cast of undefined children to an empty string when creating an option tag that will be selected:

```
  <select defaultValue="test">
    <option value='test' dangerouslySetInnerHTML={{ __html: '&rlm; test'}} />
  </select>
```

This causes an invariant error because both children and dangerouslySetInnerHTML are set.
---
 .../src/__tests__/ReactDOMSelect-test.js      | 29 +++++++++++++++++++
 .../src/server/ReactPartialRenderer.js        |  4 ++-
 2 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMSelect-test.js b/packages/react-dom/src/__tests__/ReactDOMSelect-test.js
index 5c2277c5ee60..a96a61d65967 100644
--- a/packages/react-dom/src/__tests__/ReactDOMSelect-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMSelect-test.js
@@ -443,6 +443,35 @@ describe('ReactDOMSelect', () => {
     expect(markup).not.toContain('<option selected="" value="gorilla"');
   });
 
+  it('should support server-side rendering with dangerouslySetInnerHTML', () => {
+    const stub = (
+      <select defaultValue="giraffe">
+        <option
+          value="monkey"
+          dangerouslySetInnerHTML={{
+            __html: 'A monkey!',
+          }}
+        />
+        <option
+          value="giraffe"
+          dangerouslySetInnerHTML={{
+            __html: 'A giraffe!',
+          }}
+        />
+        <option
+          value="gorilla"
+          dangerouslySetInnerHTML={{
+            __html: 'A gorilla!',
+          }}
+        />
+      </select>
+    );
+    const markup = ReactDOMServer.renderToString(stub);
+    expect(markup).toContain('<option selected="" value="giraffe"');
+    expect(markup).not.toContain('<option selected="" value="monkey"');
+    expect(markup).not.toContain('<option selected="" value="gorilla"');
+  });
+
   it('should support server-side rendering with multiple', () => {
     const stub = (
       <select multiple={true} value={['giraffe', 'gorilla']} onChange={noop}>
diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js
index 04234411f2a9..607a409dae0a 100644
--- a/packages/react-dom/src/server/ReactPartialRenderer.js
+++ b/packages/react-dom/src/server/ReactPartialRenderer.js
@@ -1173,7 +1173,9 @@ class ReactDOMServerRenderer {
     } else if (tag === 'option') {
       let selected = null;
       const selectValue = this.currentSelectValue;
-      const optionChildren = flattenOptionChildren(props.children);
+      const optionChildren = Array.isArray(props.children)
+        ? flattenOptionChildren(props.children)
+        : props.children;
       if (selectValue != null) {
         let value;
         if (props.value != null) {

From f4455cdb2d1aa90f1d50ae8042b029debefec7c4 Mon Sep 17 00:00:00 2001
From: Michael Ridgway <mridgway@netflix.com>
Date: Wed, 20 Jun 2018 12:57:13 -0700
Subject: [PATCH 2/6] PR fix and new ReactDOMServerIntegrationForms test

---
 .../ReactDOMServerIntegrationForms-test.js    | 33 +++++++++++++++++++
 .../src/server/ReactPartialRenderer.js        |  7 ++--
 2 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationForms-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationForms-test.js
index 2d873d20c61e..432109822859 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationForms-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationForms-test.js
@@ -327,6 +327,39 @@ describe('ReactDOMServerIntegration', () => {
         expectSelectValue(e, 'bar');
       });
 
+      itRenders(
+        'a select with options that use dangerouslySetInnerHTML',
+        async render => {
+          const e = await render(
+            <select defaultValue="baz" value="bar" readOnly={true}>
+              <option
+                id="foo"
+                value="foo"
+                dangerouslySetInnerHTML={{
+                  __html: 'Foo',
+                }}
+              />
+              <option
+                id="bar"
+                value="bar"
+                dangerouslySetInnerHTML={{
+                  __html: 'Bar',
+                }}
+              />
+              <option
+                id="baz"
+                value="baz"
+                dangerouslySetInnerHTML={{
+                  __html: 'Baz',
+                }}
+              />
+            </select>,
+            1,
+          );
+          expectSelectValue(e, 'bar');
+        },
+      );
+
       itRenders(
         'a select value overriding defaultValue no matter the prop order',
         async render => {
diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js
index 607a409dae0a..07108dbd048e 100644
--- a/packages/react-dom/src/server/ReactPartialRenderer.js
+++ b/packages/react-dom/src/server/ReactPartialRenderer.js
@@ -1173,9 +1173,10 @@ class ReactDOMServerRenderer {
     } else if (tag === 'option') {
       let selected = null;
       const selectValue = this.currentSelectValue;
-      const optionChildren = Array.isArray(props.children)
-        ? flattenOptionChildren(props.children)
-        : props.children;
+      const optionChildren =
+        props.children === undefined
+          ? props.children
+          : flattenOptionChildren(props.children);
       if (selectValue != null) {
         let value;
         if (props.value != null) {

From d752c77ca442b7f15767479d3651532a0d1c5ef4 Mon Sep 17 00:00:00 2001
From: Michael Ridgway <mridgway@netflix.com>
Date: Wed, 20 Jun 2018 20:52:58 -0700
Subject: [PATCH 3/6] Account for null case

---
 .../src/__tests__/ReactDOMSelect-test.js      | 59 ++++++++--------
 .../ReactDOMServerIntegrationForms-test.js    | 69 ++++++++++---------
 .../src/server/ReactPartialRenderer.js        | 10 +--
 3 files changed, 74 insertions(+), 64 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMSelect-test.js b/packages/react-dom/src/__tests__/ReactDOMSelect-test.js
index a96a61d65967..75310138babf 100644
--- a/packages/react-dom/src/__tests__/ReactDOMSelect-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMSelect-test.js
@@ -443,33 +443,38 @@ describe('ReactDOMSelect', () => {
     expect(markup).not.toContain('<option selected="" value="gorilla"');
   });
 
-  it('should support server-side rendering with dangerouslySetInnerHTML', () => {
-    const stub = (
-      <select defaultValue="giraffe">
-        <option
-          value="monkey"
-          dangerouslySetInnerHTML={{
-            __html: 'A monkey!',
-          }}
-        />
-        <option
-          value="giraffe"
-          dangerouslySetInnerHTML={{
-            __html: 'A giraffe!',
-          }}
-        />
-        <option
-          value="gorilla"
-          dangerouslySetInnerHTML={{
-            __html: 'A gorilla!',
-          }}
-        />
-      </select>
-    );
-    const markup = ReactDOMServer.renderToString(stub);
-    expect(markup).toContain('<option selected="" value="giraffe"');
-    expect(markup).not.toContain('<option selected="" value="monkey"');
-    expect(markup).not.toContain('<option selected="" value="gorilla"');
+  [null, undefined].forEach(val => {
+    it(`should support server-side rendering with dangerouslySetInnerHTML and ${val} children`, () => {
+      const stub = (
+        <select defaultValue="giraffe">
+          <option
+            value="monkey"
+            dangerouslySetInnerHTML={{
+              __html: 'A monkey!',
+            }}>
+            {val}
+          </option>
+          <option
+            value="giraffe"
+            dangerouslySetInnerHTML={{
+              __html: 'A giraffe!',
+            }}>
+            {val}
+          </option>
+          <option
+            value="gorilla"
+            dangerouslySetInnerHTML={{
+              __html: 'A gorilla!',
+            }}>
+            {val}
+          </option>
+        </select>
+      );
+      const markup = ReactDOMServer.renderToString(stub);
+      expect(markup).toContain('<option selected="" value="giraffe"');
+      expect(markup).not.toContain('<option selected="" value="monkey"');
+      expect(markup).not.toContain('<option selected="" value="gorilla"');
+    });
   });
 
   it('should support server-side rendering with multiple', () => {
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationForms-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationForms-test.js
index 432109822859..c5c833112d18 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationForms-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationForms-test.js
@@ -327,38 +327,43 @@ describe('ReactDOMServerIntegration', () => {
         expectSelectValue(e, 'bar');
       });
 
-      itRenders(
-        'a select with options that use dangerouslySetInnerHTML',
-        async render => {
-          const e = await render(
-            <select defaultValue="baz" value="bar" readOnly={true}>
-              <option
-                id="foo"
-                value="foo"
-                dangerouslySetInnerHTML={{
-                  __html: 'Foo',
-                }}
-              />
-              <option
-                id="bar"
-                value="bar"
-                dangerouslySetInnerHTML={{
-                  __html: 'Bar',
-                }}
-              />
-              <option
-                id="baz"
-                value="baz"
-                dangerouslySetInnerHTML={{
-                  __html: 'Baz',
-                }}
-              />
-            </select>,
-            1,
-          );
-          expectSelectValue(e, 'bar');
-        },
-      );
+      [null, undefined].forEach(val => {
+        itRenders(
+          `a select with options that use dangerouslySetInnerHTML and ${val} children`,
+          async render => {
+            const e = await render(
+              <select defaultValue="baz" value="bar" readOnly={true}>
+                <option
+                  id="foo"
+                  value="foo"
+                  dangerouslySetInnerHTML={{
+                    __html: 'Foo',
+                  }}>
+                  {val}
+                </option>
+                <option
+                  id="bar"
+                  value="bar"
+                  dangerouslySetInnerHTML={{
+                    __html: 'Bar',
+                  }}>
+                  {val}
+                </option>
+                <option
+                  id="baz"
+                  value="baz"
+                  dangerouslySetInnerHTML={{
+                    __html: 'Baz',
+                  }}>
+                  {val}
+                </option>
+              </select>,
+              1,
+            );
+            expectSelectValue(e, 'bar');
+          },
+        );
+      });
 
       itRenders(
         'a select value overriding defaultValue no matter the prop order',
diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js
index 07108dbd048e..f3c20cde346e 100644
--- a/packages/react-dom/src/server/ReactPartialRenderer.js
+++ b/packages/react-dom/src/server/ReactPartialRenderer.js
@@ -258,7 +258,10 @@ function flattenTopLevelChildren(children: mixed): FlatReactChildren {
   return [fragmentChildElement];
 }
 
-function flattenOptionChildren(children: mixed): string {
+function flattenOptionChildren(children: mixed): ?string {
+  if (children === undefined || children === null) {
+    return children;
+  }
   let content = '';
   // Flatten children and warn if they aren't strings or numbers;
   // invalid types are ignored.
@@ -1173,10 +1176,7 @@ class ReactDOMServerRenderer {
     } else if (tag === 'option') {
       let selected = null;
       const selectValue = this.currentSelectValue;
-      const optionChildren =
-        props.children === undefined
-          ? props.children
-          : flattenOptionChildren(props.children);
+      const optionChildren = flattenOptionChildren(props.children);
       if (selectValue != null) {
         let value;
         if (props.value != null) {

From 9314c57e08776b9cca9a545f8278cc3a0ac873b3 Mon Sep 17 00:00:00 2001
From: Michael Ridgway <mridgway@netflix.com>
Date: Thu, 21 Jun 2018 10:51:22 -0700
Subject: [PATCH 4/6] Combine test cases into single test

---
 .../src/__tests__/ReactDOMSelect-test.js      | 61 ++++++++--------
 .../ReactDOMServerIntegrationForms-test.js    | 71 +++++++++----------
 2 files changed, 63 insertions(+), 69 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMSelect-test.js b/packages/react-dom/src/__tests__/ReactDOMSelect-test.js
index 75310138babf..f2df03a5b092 100644
--- a/packages/react-dom/src/__tests__/ReactDOMSelect-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMSelect-test.js
@@ -443,38 +443,35 @@ describe('ReactDOMSelect', () => {
     expect(markup).not.toContain('<option selected="" value="gorilla"');
   });
 
-  [null, undefined].forEach(val => {
-    it(`should support server-side rendering with dangerouslySetInnerHTML and ${val} children`, () => {
-      const stub = (
-        <select defaultValue="giraffe">
-          <option
-            value="monkey"
-            dangerouslySetInnerHTML={{
-              __html: 'A monkey!',
-            }}>
-            {val}
-          </option>
-          <option
-            value="giraffe"
-            dangerouslySetInnerHTML={{
-              __html: 'A giraffe!',
-            }}>
-            {val}
-          </option>
-          <option
-            value="gorilla"
-            dangerouslySetInnerHTML={{
-              __html: 'A gorilla!',
-            }}>
-            {val}
-          </option>
-        </select>
-      );
-      const markup = ReactDOMServer.renderToString(stub);
-      expect(markup).toContain('<option selected="" value="giraffe"');
-      expect(markup).not.toContain('<option selected="" value="monkey"');
-      expect(markup).not.toContain('<option selected="" value="gorilla"');
-    });
+  it('should support server-side rendering with dangerouslySetInnerHTML', () => {
+    const stub = (
+      <select defaultValue="giraffe">
+        <option
+          value="monkey"
+          dangerouslySetInnerHTML={{
+            __html: 'A monkey!',
+          }}>
+          {undefined}
+        </option>
+        <option
+          value="giraffe"
+          dangerouslySetInnerHTML={{
+            __html: 'A giraffe!',
+          }}>
+          {null}
+        </option>
+        <option
+          value="gorilla"
+          dangerouslySetInnerHTML={{
+            __html: 'A gorilla!',
+          }}
+        />
+      </select>
+    );
+    const markup = ReactDOMServer.renderToString(stub);
+    expect(markup).toContain('<option selected="" value="giraffe"');
+    expect(markup).not.toContain('<option selected="" value="monkey"');
+    expect(markup).not.toContain('<option selected="" value="gorilla"');
   });
 
   it('should support server-side rendering with multiple', () => {
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationForms-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationForms-test.js
index c5c833112d18..92b6bbb9100d 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationForms-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationForms-test.js
@@ -327,43 +327,40 @@ describe('ReactDOMServerIntegration', () => {
         expectSelectValue(e, 'bar');
       });
 
-      [null, undefined].forEach(val => {
-        itRenders(
-          `a select with options that use dangerouslySetInnerHTML and ${val} children`,
-          async render => {
-            const e = await render(
-              <select defaultValue="baz" value="bar" readOnly={true}>
-                <option
-                  id="foo"
-                  value="foo"
-                  dangerouslySetInnerHTML={{
-                    __html: 'Foo',
-                  }}>
-                  {val}
-                </option>
-                <option
-                  id="bar"
-                  value="bar"
-                  dangerouslySetInnerHTML={{
-                    __html: 'Bar',
-                  }}>
-                  {val}
-                </option>
-                <option
-                  id="baz"
-                  value="baz"
-                  dangerouslySetInnerHTML={{
-                    __html: 'Baz',
-                  }}>
-                  {val}
-                </option>
-              </select>,
-              1,
-            );
-            expectSelectValue(e, 'bar');
-          },
-        );
-      });
+      itRenders(
+        `a select with options that use dangerouslySetInnerHTML`,
+        async render => {
+          const e = await render(
+            <select defaultValue="baz" value="bar" readOnly={true}>
+              <option
+                id="foo"
+                value="foo"
+                dangerouslySetInnerHTML={{
+                  __html: 'Foo',
+                }}>
+                {undefined}
+              </option>
+              <option
+                id="bar"
+                value="bar"
+                dangerouslySetInnerHTML={{
+                  __html: 'Bar',
+                }}>
+                {null}
+              </option>
+              <option
+                id="baz"
+                value="baz"
+                dangerouslySetInnerHTML={{
+                  __html: 'Baz',
+                }}
+              />
+            </select>,
+            1,
+          );
+          expectSelectValue(e, 'bar');
+        },
+      );
 
       itRenders(
         'a select value overriding defaultValue no matter the prop order',

From 988f1df8d81305158e71098070084eb1f037bd74 Mon Sep 17 00:00:00 2001
From: Michael Ridgway <mridgway@netflix.com>
Date: Thu, 21 Jun 2018 11:47:42 -0700
Subject: [PATCH 5/6] Add tests for failure cases

---
 .../ReactDOMServerIntegrationForms-test.js    | 43 ++++++++++++++++++-
 1 file changed, 42 insertions(+), 1 deletion(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationForms-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationForms-test.js
index 92b6bbb9100d..b3f3333aa34c 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationForms-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationForms-test.js
@@ -35,6 +35,7 @@ const {
   resetModules,
   itRenders,
   itClientRenders,
+  itThrowsWhenRendering,
   renderIntoDom,
   serverRender,
 } = ReactDOMServerIntegrationUtils(initModules);
@@ -328,7 +329,7 @@ describe('ReactDOMServerIntegration', () => {
       });
 
       itRenders(
-        `a select with options that use dangerouslySetInnerHTML`,
+        'a select with options that use dangerouslySetInnerHTML',
         async render => {
           const e = await render(
             <select defaultValue="baz" value="bar" readOnly={true}>
@@ -362,6 +363,46 @@ describe('ReactDOMServerIntegration', () => {
         },
       );
 
+      itThrowsWhenRendering(
+        'a select with option that uses dangerouslySetInnerHTML and 0 as child',
+        async render => {
+          const e = await render(
+            <select defaultValue="baz" value="foo" readOnly={true}>
+              <option
+                id="foo"
+                value="foo"
+                dangerouslySetInnerHTML={{
+                  __html: 'Foo',
+                }}>
+                {0}
+              </option>
+            </select>,
+            1,
+          );
+        },
+        'Can only set one of `children` or `props.dangerouslySetInnerHTML`.',
+      );
+
+      itThrowsWhenRendering(
+        'a select with option that uses dangerouslySetInnerHTML and empty string as child',
+        async render => {
+          const e = await render(
+            <select defaultValue="baz" value="foo" readOnly={true}>
+              <option
+                id="foo"
+                value="foo"
+                dangerouslySetInnerHTML={{
+                  __html: 'Foo',
+                }}>
+                {''}
+              </option>
+            </select>,
+            1,
+          );
+        },
+        'Can only set one of `children` or `props.dangerouslySetInnerHTML`.',
+      );
+
       itRenders(
         'a select value overriding defaultValue no matter the prop order',
         async render => {

From c09d2abe91e38e071bab98bd34234b125d88c7d2 Mon Sep 17 00:00:00 2001
From: Michael Ridgway <mridgway@netflix.com>
Date: Thu, 21 Jun 2018 12:17:59 -0700
Subject: [PATCH 6/6] Fix lint

---
 .../src/__tests__/ReactDOMServerIntegrationForms-test.js      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationForms-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationForms-test.js
index b3f3333aa34c..8ae403c0f965 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationForms-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationForms-test.js
@@ -366,7 +366,7 @@ describe('ReactDOMServerIntegration', () => {
       itThrowsWhenRendering(
         'a select with option that uses dangerouslySetInnerHTML and 0 as child',
         async render => {
-          const e = await render(
+          await render(
             <select defaultValue="baz" value="foo" readOnly={true}>
               <option
                 id="foo"
@@ -386,7 +386,7 @@ describe('ReactDOMServerIntegration', () => {
       itThrowsWhenRendering(
         'a select with option that uses dangerouslySetInnerHTML and empty string as child',
         async render => {
-          const e = await render(
+          await render(
             <select defaultValue="baz" value="foo" readOnly={true}>
               <option
                 id="foo"