From 388028ed1111781830650c5805f69649e5ee264b Mon Sep 17 00:00:00 2001
From: Konstantin Yakushin <y231966mdk@gmail.com>
Date: Tue, 24 Jul 2018 19:53:11 +0300
Subject: [PATCH 01/10] Make option children a text content by default

fix #11911
---
 .../src/components/fixtures/selects/index.js  | 25 ++++++++++++
 .../src/__tests__/ReactDOMOption-test.js      |  4 +-
 .../src/client/ReactDOMFiberOption.js         | 14 ++++++-
 .../src/client/ReactDOMHostConfig.js          |  1 +
 scripts/rollup/results.json                   | 40 +++++++++----------
 5 files changed, 59 insertions(+), 25 deletions(-)

diff --git a/fixtures/dom/src/components/fixtures/selects/index.js b/fixtures/dom/src/components/fixtures/selects/index.js
index 5460919cc23..31d7f4436d7 100644
--- a/fixtures/dom/src/components/fixtures/selects/index.js
+++ b/fixtures/dom/src/components/fixtures/selects/index.js
@@ -158,6 +158,31 @@ class SelectFixture extends React.Component {
             </form>
           </div>
         </TestCase>
+
+        <TestCase
+          title="An option which contains conditional render fails"
+          relatedIssues="11911">
+          <TestCase.Steps>
+            <li>Select any option</li>
+          </TestCase.Steps>
+          <TestCase.ExpectedResult>
+            Option should be set
+          </TestCase.ExpectedResult>
+
+          <div className="test-fixture">
+            <select value={this.state.value} onChange={this.onChange}>
+              <option value="red">
+                red {this.state.value === 'red' && 'is chosen '} TextNode
+              </option>
+              <option value="blue">
+                blue {this.state.value === 'blue' && 'is chosen '} TextNode
+              </option>
+              <option value="green">
+                green {this.state.value === 'green' && 'is chosen '} TextNode
+              </option>
+            </select>
+          </div>
+        </TestCase>
       </FixtureSet>
     );
   }
diff --git a/packages/react-dom/src/__tests__/ReactDOMOption-test.js b/packages/react-dom/src/__tests__/ReactDOMOption-test.js
index 8cbd0118d2c..bd30ae23a1d 100644
--- a/packages/react-dom/src/__tests__/ReactDOMOption-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMOption-test.js
@@ -41,9 +41,7 @@ describe('ReactDOMOption', () => {
     expect(() => {
       node = ReactTestUtils.renderIntoDocument(el);
     }).toWarnDev(
-      '<div> cannot appear as a child of <option>.\n' +
-        '    in div (at **)\n' +
-        '    in option (at **)',
+      '<div> cannot appear as a child of <option>.\n' + '    in option (at **)',
     );
     expect(node.innerHTML).toBe('1  2');
     ReactTestUtils.renderIntoDocument(el);
diff --git a/packages/react-dom/src/client/ReactDOMFiberOption.js b/packages/react-dom/src/client/ReactDOMFiberOption.js
index e5c04d23924..0658ce8f2ab 100644
--- a/packages/react-dom/src/client/ReactDOMFiberOption.js
+++ b/packages/react-dom/src/client/ReactDOMFiberOption.js
@@ -9,6 +9,7 @@
 
 import React from 'react';
 import warning from 'shared/warning';
+import validateDOMNesting from './validateDOMNesting';
 
 let didWarnSelectedSetOnOption = false;
 
@@ -17,14 +18,23 @@ function flattenChildren(children) {
 
   // Flatten children and warn if they aren't strings or numbers;
   // invalid types are ignored.
-  // We can silently skip them because invalid DOM nesting warning
-  // catches these cases in Fiber.
   React.Children.forEach(children, function(child) {
     if (child == null) {
       return;
     }
     if (typeof child === 'string' || typeof child === 'number') {
       content += child;
+      return;
+    }
+    if (__DEV__) {
+      // We do not have HostContext here
+      // but we can put some parent information at least
+      // Also this cause a bit different message than it was previously
+      validateDOMNesting(child.type, null, {
+        current: {
+          tag: 'option',
+        },
+      });
     }
   });
 
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index 412f06a9aa8..e8f6a5bbdec 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -248,6 +248,7 @@ export function prepareUpdate(
 export function shouldSetTextContent(type: string, props: Props): boolean {
   return (
     type === 'textarea' ||
+    type === 'option' ||
     typeof props.children === 'string' ||
     typeof props.children === 'number' ||
     (typeof props.dangerouslySetInnerHTML === 'object' &&
diff --git a/scripts/rollup/results.json b/scripts/rollup/results.json
index ea7d1c4e07d..7e5f412a4c0 100644
--- a/scripts/rollup/results.json
+++ b/scripts/rollup/results.json
@@ -4,15 +4,15 @@
       "filename": "react.development.js",
       "bundleType": "UMD_DEV",
       "packageName": "react",
-      "size": 59086,
-      "gzip": 16296
+      "size": 59233,
+      "gzip": 16554
     },
     {
       "filename": "react.production.min.js",
       "bundleType": "UMD_PROD",
       "packageName": "react",
-      "size": 7217,
-      "gzip": 3050
+      "size": 7332,
+      "gzip": 3111
     },
     {
       "filename": "react.development.js",
@@ -46,15 +46,15 @@
       "filename": "react-dom.development.js",
       "bundleType": "UMD_DEV",
       "packageName": "react-dom",
-      "size": 641505,
-      "gzip": 149286
+      "size": 656643,
+      "gzip": 153886
     },
     {
       "filename": "react-dom.production.min.js",
       "bundleType": "UMD_PROD",
       "packageName": "react-dom",
-      "size": 96507,
-      "gzip": 31258
+      "size": 98962,
+      "gzip": 32102
     },
     {
       "filename": "react-dom.development.js",
@@ -88,15 +88,15 @@
       "filename": "react-dom-test-utils.development.js",
       "bundleType": "UMD_DEV",
       "packageName": "react-dom",
-      "size": 46355,
-      "gzip": 12768
+      "size": 44787,
+      "gzip": 12185
     },
     {
       "filename": "react-dom-test-utils.production.min.js",
       "bundleType": "UMD_PROD",
       "packageName": "react-dom",
-      "size": 10653,
-      "gzip": 3918
+      "size": 10366,
+      "gzip": 3841
     },
     {
       "filename": "react-dom-test-utils.development.js",
@@ -123,15 +123,15 @@
       "filename": "react-dom-unstable-native-dependencies.development.js",
       "bundleType": "UMD_DEV",
       "packageName": "react-dom",
-      "size": 62921,
-      "gzip": 16559
+      "size": 60219,
+      "gzip": 15769
     },
     {
       "filename": "react-dom-unstable-native-dependencies.production.min.js",
       "bundleType": "UMD_PROD",
       "packageName": "react-dom",
-      "size": 11622,
-      "gzip": 4007
+      "size": 11378,
+      "gzip": 3929
     },
     {
       "filename": "react-dom-unstable-native-dependencies.development.js",
@@ -165,15 +165,15 @@
       "filename": "react-dom-server.browser.development.js",
       "bundleType": "UMD_DEV",
       "packageName": "react-dom",
-      "size": 105006,
-      "gzip": 27524
+      "size": 104567,
+      "gzip": 27873
     },
     {
       "filename": "react-dom-server.browser.production.min.js",
       "bundleType": "UMD_PROD",
       "packageName": "react-dom",
-      "size": 15463,
-      "gzip": 5917
+      "size": 15619,
+      "gzip": 5953
     },
     {
       "filename": "react-dom-server.browser.development.js",

From f829340f4fb12c9a5d7d13cb7cba29cdac8db9ae Mon Sep 17 00:00:00 2001
From: Konstantin Yakushin <y231966mdk@gmail.com>
Date: Thu, 26 Jul 2018 20:47:53 +0300
Subject: [PATCH 02/10] Apply requested changes

- Remove meaningless comments
- revert scripts/rollup/results.json
---
 .../src/client/ReactDOMFiberOption.js         |  1 -
 scripts/rollup/results.json                   | 42 +++++++++----------
 2 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/packages/react-dom/src/client/ReactDOMFiberOption.js b/packages/react-dom/src/client/ReactDOMFiberOption.js
index 0658ce8f2ab..efc67e958cc 100644
--- a/packages/react-dom/src/client/ReactDOMFiberOption.js
+++ b/packages/react-dom/src/client/ReactDOMFiberOption.js
@@ -29,7 +29,6 @@ function flattenChildren(children) {
     if (__DEV__) {
       // We do not have HostContext here
       // but we can put some parent information at least
-      // Also this cause a bit different message than it was previously
       validateDOMNesting(child.type, null, {
         current: {
           tag: 'option',
diff --git a/scripts/rollup/results.json b/scripts/rollup/results.json
index 7e5f412a4c0..6dedf26eb6b 100644
--- a/scripts/rollup/results.json
+++ b/scripts/rollup/results.json
@@ -4,15 +4,15 @@
       "filename": "react.development.js",
       "bundleType": "UMD_DEV",
       "packageName": "react",
-      "size": 59233,
-      "gzip": 16554
+      "size": 59086,
+      "gzip": 16296
     },
     {
       "filename": "react.production.min.js",
       "bundleType": "UMD_PROD",
       "packageName": "react",
-      "size": 7332,
-      "gzip": 3111
+      "size": 7217,
+      "gzip": 3050
     },
     {
       "filename": "react.development.js",
@@ -46,15 +46,15 @@
       "filename": "react-dom.development.js",
       "bundleType": "UMD_DEV",
       "packageName": "react-dom",
-      "size": 656643,
-      "gzip": 153886
+      "size": 641505,
+      "gzip": 149286
     },
     {
       "filename": "react-dom.production.min.js",
       "bundleType": "UMD_PROD",
       "packageName": "react-dom",
-      "size": 98962,
-      "gzip": 32102
+      "size": 96507,
+      "gzip": 31258
     },
     {
       "filename": "react-dom.development.js",
@@ -88,15 +88,15 @@
       "filename": "react-dom-test-utils.development.js",
       "bundleType": "UMD_DEV",
       "packageName": "react-dom",
-      "size": 44787,
-      "gzip": 12185
+      "size": 46355,
+      "gzip": 12768
     },
     {
       "filename": "react-dom-test-utils.production.min.js",
       "bundleType": "UMD_PROD",
       "packageName": "react-dom",
-      "size": 10366,
-      "gzip": 3841
+      "size": 10653,
+      "gzip": 3918
     },
     {
       "filename": "react-dom-test-utils.development.js",
@@ -123,15 +123,15 @@
       "filename": "react-dom-unstable-native-dependencies.development.js",
       "bundleType": "UMD_DEV",
       "packageName": "react-dom",
-      "size": 60219,
-      "gzip": 15769
+      "size": 62921,
+      "gzip": 16559
     },
     {
       "filename": "react-dom-unstable-native-dependencies.production.min.js",
       "bundleType": "UMD_PROD",
       "packageName": "react-dom",
-      "size": 11378,
-      "gzip": 3929
+      "size": 11622,
+      "gzip": 4007
     },
     {
       "filename": "react-dom-unstable-native-dependencies.development.js",
@@ -165,15 +165,15 @@
       "filename": "react-dom-server.browser.development.js",
       "bundleType": "UMD_DEV",
       "packageName": "react-dom",
-      "size": 104567,
-      "gzip": 27873
+      "size": 105006,
+      "gzip": 27524
     },
     {
       "filename": "react-dom-server.browser.production.min.js",
       "bundleType": "UMD_PROD",
       "packageName": "react-dom",
-      "size": 15619,
-      "gzip": 5953
+      "size": 15463,
+      "gzip": 5917
     },
     {
       "filename": "react-dom-server.browser.development.js",
@@ -750,4 +750,4 @@
       "gzip": 2108
     }
   ]
-}
\ No newline at end of file
+}

From 73697ef60d38c295bd8b9a98b523d7f4945c6c01 Mon Sep 17 00:00:00 2001
From: Konstantin Yakushin <y231966mdk@gmail.com>
Date: Thu, 26 Jul 2018 21:02:57 +0300
Subject: [PATCH 03/10] remove empty row

---
 scripts/rollup/results.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/rollup/results.json b/scripts/rollup/results.json
index 6dedf26eb6b..ea7d1c4e07d 100644
--- a/scripts/rollup/results.json
+++ b/scripts/rollup/results.json
@@ -750,4 +750,4 @@
       "gzip": 2108
     }
   ]
-}
+}
\ No newline at end of file

From 65691b682d95e5504bbfeebd7add55c80c750cde Mon Sep 17 00:00:00 2001
From: Konstantin Yakushin <y231966mdk@gmail.com>
Date: Thu, 26 Jul 2018 21:14:13 +0300
Subject: [PATCH 04/10] Update comment

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

diff --git a/packages/react-dom/src/client/ReactDOMFiberOption.js b/packages/react-dom/src/client/ReactDOMFiberOption.js
index efc67e958cc..d2a12f56c12 100644
--- a/packages/react-dom/src/client/ReactDOMFiberOption.js
+++ b/packages/react-dom/src/client/ReactDOMFiberOption.js
@@ -27,8 +27,8 @@ function flattenChildren(children) {
       return;
     }
     if (__DEV__) {
-      // We do not have HostContext here
-      // but we can put some parent information at least
+      // We do not have HostContext here, but we can at least
+      // put some parent information
       validateDOMNesting(child.type, null, {
         current: {
           tag: 'option',

From 9ca2085f98d7a3851cf461bf8ecabbdc5477702a Mon Sep 17 00:00:00 2001
From: Konstantin Yakushin <y231966mdk@gmail.com>
Date: Thu, 26 Jul 2018 22:36:32 +0300
Subject: [PATCH 05/10] Add a simple unit-test

---
 .../src/__tests__/ReactDOMSelect-test.js      | 42 +++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/packages/react-dom/src/__tests__/ReactDOMSelect-test.js b/packages/react-dom/src/__tests__/ReactDOMSelect-test.js
index e94cc7895cb..87b5cd91628 100644
--- a/packages/react-dom/src/__tests__/ReactDOMSelect-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMSelect-test.js
@@ -545,6 +545,48 @@ describe('ReactDOMSelect', () => {
     expect(node.options[2].selected).toBe(false); // gorilla
   });
 
+  it('should not fail', () => {
+    const container = document.createElement('div');
+
+    let node;
+
+    function App({value}) {
+      return (
+        <select value={value} ref={n => (node = n)} onChange={noop}>
+          <option key="monkey" value="monkey">
+            A monkey {value === 'monkey' ? 'is chosen' : null}!
+          </option>
+          <option key="giraffe" value="giraffe">
+            A giraffe {value === 'giraffe' && 'is chosen'}!
+          </option>
+          <option key="gorilla" value="gorilla">
+            A gorilla {value === 'gorilla' && 'is chosen'}!
+          </option>
+        </select>
+      );
+    }
+
+    ReactDOM.render(
+      <App value={'monkey'} />,
+      container,
+    );
+
+    expect(node.options[0].selected).toBe(true); // monkey
+    expect(node.options[1].selected).toBe(false); // giraffe
+    expect(node.options[2].selected).toBe(false); // gorilla
+
+
+    ReactDOM.render(
+      <App value={'giraffe'} />,
+      container,
+    );
+
+    expect(node.options[0].selected).toBe(false); // monkey
+    expect(node.options[1].selected).toBe(true); // giraffe
+    expect(node.options[2].selected).toBe(false); // gorilla
+
+  });
+
   it('should warn if value is null', () => {
     expect(() =>
       ReactTestUtils.renderIntoDocument(

From 931417b4748da1ee0775130398723804201e6d77 Mon Sep 17 00:00:00 2001
From: Konstantin Yakushin <y231966mdk@gmail.com>
Date: Fri, 27 Jul 2018 00:09:46 +0300
Subject: [PATCH 06/10] [WIP: no flow] Pass through hostContext

---
 .../react-dom/src/client/ReactDOMFiberComponent.js   |  3 ++-
 packages/react-dom/src/client/ReactDOMFiberOption.js | 12 ++++--------
 packages/react-dom/src/client/ReactDOMHostConfig.js  |  2 +-
 3 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/packages/react-dom/src/client/ReactDOMFiberComponent.js b/packages/react-dom/src/client/ReactDOMFiberComponent.js
index bad296429e4..55933a0cf63 100644
--- a/packages/react-dom/src/client/ReactDOMFiberComponent.js
+++ b/packages/react-dom/src/client/ReactDOMFiberComponent.js
@@ -420,6 +420,7 @@ export function setInitialProperties(
   tag: string,
   rawProps: Object,
   rootContainerElement: Element | Document,
+  hostContext: Object,
 ): void {
   const isCustomComponentTag = isCustomComponent(tag, rawProps);
   if (__DEV__) {
@@ -485,7 +486,7 @@ export function setInitialProperties(
       break;
     case 'option':
       ReactDOMFiberOption.validateProps(domElement, rawProps);
-      props = ReactDOMFiberOption.getHostProps(domElement, rawProps);
+      props = ReactDOMFiberOption.getHostProps(domElement, rawProps, hostContext);
       break;
     case 'select':
       ReactDOMFiberSelect.initWrapperState(domElement, rawProps);
diff --git a/packages/react-dom/src/client/ReactDOMFiberOption.js b/packages/react-dom/src/client/ReactDOMFiberOption.js
index d2a12f56c12..ea2c4321361 100644
--- a/packages/react-dom/src/client/ReactDOMFiberOption.js
+++ b/packages/react-dom/src/client/ReactDOMFiberOption.js
@@ -13,7 +13,7 @@ import validateDOMNesting from './validateDOMNesting';
 
 let didWarnSelectedSetOnOption = false;
 
-function flattenChildren(children) {
+function flattenChildren(children, hostContext = {}) {
   let content = '';
 
   // Flatten children and warn if they aren't strings or numbers;
@@ -29,11 +29,7 @@ function flattenChildren(children) {
     if (__DEV__) {
       // We do not have HostContext here, but we can at least
       // put some parent information
-      validateDOMNesting(child.type, null, {
-        current: {
-          tag: 'option',
-        },
-      });
+      validateDOMNesting(child.type, null, hostContext.ancestorInfo);
     }
   });
 
@@ -65,9 +61,9 @@ export function postMountWrapper(element: Element, props: Object) {
   }
 }
 
-export function getHostProps(element: Element, props: Object) {
+export function getHostProps(element: Element, props: Object, hostContext: Object = {}) {
   const hostProps = {children: undefined, ...props};
-  const content = flattenChildren(props.children);
+  const content = flattenChildren(props.children, hostContext);
 
   if (content) {
     hostProps.children = content;
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index e8f6a5bbdec..8f94fdc97d8 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -208,7 +208,7 @@ export function finalizeInitialChildren(
   rootContainerInstance: Container,
   hostContext: HostContext,
 ): boolean {
-  setInitialProperties(domElement, type, props, rootContainerInstance);
+  setInitialProperties(domElement, type, props, rootContainerInstance, hostContext);
   return shouldAutoFocusHostComponent(type, props);
 }
 

From 485d8db76247d3d27d393bfc265f3da2c1ecf5af Mon Sep 17 00:00:00 2001
From: Konstantin Yakushin <y231966mdk@gmail.com>
Date: Wed, 1 Aug 2018 14:15:10 +0300
Subject: [PATCH 07/10] [WIP: no flow] Give better description for test

---
 packages/react-dom/src/__tests__/ReactDOMSelect-test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMSelect-test.js b/packages/react-dom/src/__tests__/ReactDOMSelect-test.js
index 87b5cd91628..44e3255add5 100644
--- a/packages/react-dom/src/__tests__/ReactDOMSelect-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMSelect-test.js
@@ -545,7 +545,7 @@ describe('ReactDOMSelect', () => {
     expect(node.options[2].selected).toBe(false); // gorilla
   });
 
-  it('should not fail', () => {
+  it('Options with stateful children; it should change its state properly and shouldn\'t fail', () => {
     const container = document.createElement('div');
 
     let node;

From a6a8d1cd471befd072fd43617a49528e0ee140e4 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 1 Aug 2018 14:52:31 +0100
Subject: [PATCH 08/10] Fixes

---
 .../src/__tests__/ReactDOMSelect-test.js         | 16 +++-------------
 .../src/client/ReactDOMFiberComponent.js         |  8 ++++++--
 .../react-dom/src/client/ReactDOMFiberOption.js  | 15 ++++++++++-----
 .../react-dom/src/client/ReactDOMHostConfig.js   | 10 ++++++++--
 4 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMSelect-test.js b/packages/react-dom/src/__tests__/ReactDOMSelect-test.js
index 44e3255add5..04efbec66a1 100644
--- a/packages/react-dom/src/__tests__/ReactDOMSelect-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMSelect-test.js
@@ -545,7 +545,7 @@ describe('ReactDOMSelect', () => {
     expect(node.options[2].selected).toBe(false); // gorilla
   });
 
-  it('Options with stateful children; it should change its state properly and shouldn\'t fail', () => {
+  it('should support options with dynamic children', () => {
     const container = document.createElement('div');
 
     let node;
@@ -566,25 +566,15 @@ describe('ReactDOMSelect', () => {
       );
     }
 
-    ReactDOM.render(
-      <App value={'monkey'} />,
-      container,
-    );
-
+    ReactDOM.render(<App value="monkey" />, container);
     expect(node.options[0].selected).toBe(true); // monkey
     expect(node.options[1].selected).toBe(false); // giraffe
     expect(node.options[2].selected).toBe(false); // gorilla
 
-
-    ReactDOM.render(
-      <App value={'giraffe'} />,
-      container,
-    );
-
+    ReactDOM.render(<App value="giraffe" />, container);
     expect(node.options[0].selected).toBe(false); // monkey
     expect(node.options[1].selected).toBe(true); // giraffe
     expect(node.options[2].selected).toBe(false); // gorilla
-
   });
 
   it('should warn if value is null', () => {
diff --git a/packages/react-dom/src/client/ReactDOMFiberComponent.js b/packages/react-dom/src/client/ReactDOMFiberComponent.js
index 55933a0cf63..24f6428bea9 100644
--- a/packages/react-dom/src/client/ReactDOMFiberComponent.js
+++ b/packages/react-dom/src/client/ReactDOMFiberComponent.js
@@ -420,7 +420,7 @@ export function setInitialProperties(
   tag: string,
   rawProps: Object,
   rootContainerElement: Element | Document,
-  hostContext: Object,
+  hostContext: *,
 ): void {
   const isCustomComponentTag = isCustomComponent(tag, rawProps);
   if (__DEV__) {
@@ -486,7 +486,11 @@ export function setInitialProperties(
       break;
     case 'option':
       ReactDOMFiberOption.validateProps(domElement, rawProps);
-      props = ReactDOMFiberOption.getHostProps(domElement, rawProps, hostContext);
+      props = ReactDOMFiberOption.getHostProps(
+        domElement,
+        rawProps,
+        hostContext,
+      );
       break;
     case 'select':
       ReactDOMFiberSelect.initWrapperState(domElement, rawProps);
diff --git a/packages/react-dom/src/client/ReactDOMFiberOption.js b/packages/react-dom/src/client/ReactDOMFiberOption.js
index ea2c4321361..f9fcefda26e 100644
--- a/packages/react-dom/src/client/ReactDOMFiberOption.js
+++ b/packages/react-dom/src/client/ReactDOMFiberOption.js
@@ -7,13 +7,15 @@
  * @flow
  */
 
+import type {HostContextDev} from './ReactDOMHostConfig';
+
 import React from 'react';
 import warning from 'shared/warning';
 import validateDOMNesting from './validateDOMNesting';
 
 let didWarnSelectedSetOnOption = false;
 
-function flattenChildren(children, hostContext = {}) {
+function flattenChildren(children, hostContext) {
   let content = '';
 
   // Flatten children and warn if they aren't strings or numbers;
@@ -27,9 +29,12 @@ function flattenChildren(children, hostContext = {}) {
       return;
     }
     if (__DEV__) {
-      // We do not have HostContext here, but we can at least
-      // put some parent information
-      validateDOMNesting(child.type, null, hostContext.ancestorInfo);
+      const hostContextDev = ((hostContext: any): HostContextDev);
+      const optionAncestorInfo = validateDOMNesting.updatedAncestorInfo(
+        hostContextDev.ancestorInfo,
+        'option',
+      );
+      validateDOMNesting(child.type, null, optionAncestorInfo);
     }
   });
 
@@ -61,7 +66,7 @@ export function postMountWrapper(element: Element, props: Object) {
   }
 }
 
-export function getHostProps(element: Element, props: Object, hostContext: Object = {}) {
+export function getHostProps(element: Element, props: Object, hostContext: *) {
   const hostProps = {children: undefined, ...props};
   const content = flattenChildren(props.children, hostContext);
 
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index 8f94fdc97d8..afa192595a5 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -37,7 +37,7 @@ export type Instance = Element;
 export type TextInstance = Text;
 export type HydratableInstance = Element | Text;
 export type PublicInstance = Element | Text;
-type HostContextDev = {
+export type HostContextDev = {
   namespace: string,
   ancestorInfo: mixed,
 };
@@ -208,7 +208,13 @@ export function finalizeInitialChildren(
   rootContainerInstance: Container,
   hostContext: HostContext,
 ): boolean {
-  setInitialProperties(domElement, type, props, rootContainerInstance, hostContext);
+  setInitialProperties(
+    domElement,
+    type,
+    props,
+    rootContainerInstance,
+    hostContext,
+  );
   return shouldAutoFocusHostComponent(type, props);
 }
 

From 7ccf3ce6e5bf31e1b91d37e304757894139070db Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 1 Aug 2018 15:00:22 +0100
Subject: [PATCH 09/10] Don't pass hostContext through

It ended up being more complicated than I thought.
---
 .../src/client/ReactDOMFiberComponent.js      |  7 +------
 .../src/client/ReactDOMFiberOption.js         | 20 ++++++++++---------
 .../src/client/ReactDOMHostConfig.js          | 10 ++--------
 3 files changed, 14 insertions(+), 23 deletions(-)

diff --git a/packages/react-dom/src/client/ReactDOMFiberComponent.js b/packages/react-dom/src/client/ReactDOMFiberComponent.js
index 24f6428bea9..bad296429e4 100644
--- a/packages/react-dom/src/client/ReactDOMFiberComponent.js
+++ b/packages/react-dom/src/client/ReactDOMFiberComponent.js
@@ -420,7 +420,6 @@ export function setInitialProperties(
   tag: string,
   rawProps: Object,
   rootContainerElement: Element | Document,
-  hostContext: *,
 ): void {
   const isCustomComponentTag = isCustomComponent(tag, rawProps);
   if (__DEV__) {
@@ -486,11 +485,7 @@ export function setInitialProperties(
       break;
     case 'option':
       ReactDOMFiberOption.validateProps(domElement, rawProps);
-      props = ReactDOMFiberOption.getHostProps(
-        domElement,
-        rawProps,
-        hostContext,
-      );
+      props = ReactDOMFiberOption.getHostProps(domElement, rawProps);
       break;
     case 'select':
       ReactDOMFiberSelect.initWrapperState(domElement, rawProps);
diff --git a/packages/react-dom/src/client/ReactDOMFiberOption.js b/packages/react-dom/src/client/ReactDOMFiberOption.js
index f9fcefda26e..66dfeaba3a4 100644
--- a/packages/react-dom/src/client/ReactDOMFiberOption.js
+++ b/packages/react-dom/src/client/ReactDOMFiberOption.js
@@ -7,15 +7,13 @@
  * @flow
  */
 
-import type {HostContextDev} from './ReactDOMHostConfig';
-
 import React from 'react';
 import warning from 'shared/warning';
 import validateDOMNesting from './validateDOMNesting';
 
 let didWarnSelectedSetOnOption = false;
 
-function flattenChildren(children, hostContext) {
+function flattenChildren(children) {
   let content = '';
 
   // Flatten children and warn if they aren't strings or numbers;
@@ -29,12 +27,16 @@ function flattenChildren(children, hostContext) {
       return;
     }
     if (__DEV__) {
-      const hostContextDev = ((hostContext: any): HostContextDev);
-      const optionAncestorInfo = validateDOMNesting.updatedAncestorInfo(
-        hostContextDev.ancestorInfo,
+      // This is not real ancestor info but it's close enough
+      // to produce a useful warning for invalid children.
+      // We don't have access to the real one because the <option>
+      // fiber has already been popped, and threading it through
+      // is needlessly annoying.
+      const ancestorInfo = validateDOMNesting.updatedAncestorInfo(
+        null,
         'option',
       );
-      validateDOMNesting(child.type, null, optionAncestorInfo);
+      validateDOMNesting(child.type, null, ancestorInfo);
     }
   });
 
@@ -66,9 +68,9 @@ export function postMountWrapper(element: Element, props: Object) {
   }
 }
 
-export function getHostProps(element: Element, props: Object, hostContext: *) {
+export function getHostProps(element: Element, props: Object) {
   const hostProps = {children: undefined, ...props};
-  const content = flattenChildren(props.children, hostContext);
+  const content = flattenChildren(props.children);
 
   if (content) {
     hostProps.children = content;
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index afa192595a5..e8f6a5bbdec 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -37,7 +37,7 @@ export type Instance = Element;
 export type TextInstance = Text;
 export type HydratableInstance = Element | Text;
 export type PublicInstance = Element | Text;
-export type HostContextDev = {
+type HostContextDev = {
   namespace: string,
   ancestorInfo: mixed,
 };
@@ -208,13 +208,7 @@ export function finalizeInitialChildren(
   rootContainerInstance: Container,
   hostContext: HostContext,
 ): boolean {
-  setInitialProperties(
-    domElement,
-    type,
-    props,
-    rootContainerInstance,
-    hostContext,
-  );
+  setInitialProperties(domElement, type, props, rootContainerInstance);
   return shouldAutoFocusHostComponent(type, props);
 }
 

From e614dbf93267b782c0cefe94a2e406d139766443 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 1 Aug 2018 15:59:15 +0100
Subject: [PATCH 10/10] Also warn on hydration

---
 .../ReactDOMServerIntegrationForms-test.js    | 15 +++++++
 .../ReactDOMServerIntegrationTestUtils.js     |  2 +-
 .../src/client/ReactDOMFiberOption.js         | 40 ++++++++++++-------
 3 files changed, 42 insertions(+), 15 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationForms-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationForms-test.js
index bc1db8d5692..0f6a0cab49d 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationForms-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationForms-test.js
@@ -413,6 +413,21 @@ describe('ReactDOMServerIntegration', () => {
           expectSelectValue(e, 'bar');
         },
       );
+
+      itRenders('an option with flattened children', async render => {
+        const e = await render(
+          <select readOnly={true} value="bar">
+            <option value="bar">
+              {['Bar', false, 'Foo', <div key="1" />, 'Baz']}
+            </option>
+          </select>,
+          1,
+        );
+        expect(e.getAttribute('value')).toBe(null);
+        expect(e.getAttribute('defaultValue')).toBe(null);
+        expect(e.firstChild.innerHTML).toBe('BarFooBaz');
+        expect(e.firstChild.selected).toBe(true);
+      });
     });
 
     describe('user interaction', function() {
diff --git a/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js b/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js
index a83e1ec181b..daf7b49d7fa 100644
--- a/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js
+++ b/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js
@@ -58,7 +58,7 @@ module.exports = function(initModules) {
       if (console.error.calls.count() > 0) {
         console.log(`We saw these warnings:`);
         for (let i = 0; i < console.error.calls.count(); i++) {
-          console.log(console.error.calls.argsFor(i)[0]);
+          console.log(...console.error.calls.argsFor(i));
         }
       }
     }
diff --git a/packages/react-dom/src/client/ReactDOMFiberOption.js b/packages/react-dom/src/client/ReactDOMFiberOption.js
index 66dfeaba3a4..1de8f8c693a 100644
--- a/packages/react-dom/src/client/ReactDOMFiberOption.js
+++ b/packages/react-dom/src/client/ReactDOMFiberOption.js
@@ -24,20 +24,10 @@ function flattenChildren(children) {
     }
     if (typeof child === 'string' || typeof child === 'number') {
       content += child;
-      return;
-    }
-    if (__DEV__) {
-      // This is not real ancestor info but it's close enough
-      // to produce a useful warning for invalid children.
-      // We don't have access to the real one because the <option>
-      // fiber has already been popped, and threading it through
-      // is needlessly annoying.
-      const ancestorInfo = validateDOMNesting.updatedAncestorInfo(
-        null,
-        'option',
-      );
-      validateDOMNesting(child.type, null, ancestorInfo);
     }
+    // Note: we don't warn about invalid children here.
+    // Instead, this is done separately below so that
+    // it happens during the hydration codepath too.
   });
 
   return content;
@@ -48,8 +38,30 @@ function flattenChildren(children) {
  */
 
 export function validateProps(element: Element, props: Object) {
-  // TODO (yungsters): Remove support for `selected` in <option>.
   if (__DEV__) {
+    // Warn about invalid children, mirroring the logic above.
+    if (typeof props.children === 'object' && props.children !== null) {
+      React.Children.forEach(props.children, function(child) {
+        if (child == null) {
+          return;
+        }
+        if (typeof child === 'string' || typeof child === 'number') {
+          return;
+        }
+        // This is not real ancestor info but it's close enough
+        // to produce a useful warning for invalid children.
+        // We don't have access to the real one because the <option>
+        // fiber has already been popped, and threading it through
+        // is needlessly annoying.
+        const ancestorInfo = validateDOMNesting.updatedAncestorInfo(
+          null,
+          'option',
+        );
+        validateDOMNesting(child.type, null, ancestorInfo);
+      });
+    }
+
+    // TODO: Remove support for `selected` in <option>.
     if (props.selected != null && !didWarnSelectedSetOnOption) {
       warning(
         false,