Fixes

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', () => {

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

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

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