Fix a crash when using dynamic children in <option> tag

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>
     );
   }

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);

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(

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);

packages/react-dom/src/client/ReactDOMFiberOption.js

@@ -9,22 +9,27 @@
 
 import React from 'react';
 import warning from 'shared/warning';
+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;
   // 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 at least
+      // put some parent information
+      validateDOMNesting(child.type, null, hostContext.ancestorInfo);
     }
   });
 
@@ -56,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;

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);
 }
 
@@ -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' &&