Add test for multiple text nodes in an option tag

packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js

@@ -871,5 +871,37 @@ describe('ReactDOMServerIntegration', () => {
             : ''),
       );
     });
+
+    itRenders(
+      'a select with value containing an option with multiple text children',
+      async render => {
+        const e = await render(
+          <select value="bar" readOnly={true}>
+            <option value="bar">A{'B'}</option>
+          </select>,
+          0,
+        );
+
+        const option = e.childNodes[0];
+
+        if (render === serverRender || render === streamRender) {
+          // We have three nodes because there is a comment between them.
+          expect(option.childNodes.length).toBe(3);
+          // Everything becomes LF when parsed from server HTML.
+          // Null character is ignored.
+          expectNode(option.childNodes[0], TEXT_NODE_TYPE, 'A');
+          expectNode(option.childNodes[2], TEXT_NODE_TYPE, 'B');
+        } else if (render === clientRenderOnServerString) {
+          // We have three nodes because there is a comment between them.
+          expect(option.childNodes.length).toBe(3);
+          expectNode(option.childNodes[0], TEXT_NODE_TYPE, 'A');
+          expectNode(option.childNodes[2], TEXT_NODE_TYPE, 'B');
+        } else {
+          expect(option.childNodes.length).toBe(2);
+          expectNode(option.childNodes[0], TEXT_NODE_TYPE, 'A');
+          expectNode(option.childNodes[1], TEXT_NODE_TYPE, 'B');
+        }
+      },
+    );
   });
 });

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

@@ -509,7 +509,7 @@ export function setInitialProperties(
       break;
     case 'option':
       ReactDOMFiberOption.validateProps(domElement, rawProps);
-      props = ReactDOMFiberOption.getHostProps(domElement, rawProps);
+      props = rawProps;
       break;
     case 'select':
       ReactDOMFiberSelect.initWrapperState(domElement, rawProps);
@@ -591,11 +591,6 @@ export function diffProperties(
       nextProps = ReactDOMFiberInput.getHostProps(domElement, nextRawProps);
       updatePayload = [];
       break;
-    case 'option':
-      lastProps = ReactDOMFiberOption.getHostProps(domElement, lastRawProps);
-      nextProps = ReactDOMFiberOption.getHostProps(domElement, nextRawProps);
-      updatePayload = [];
-      break;
     case 'select':
       lastProps = ReactDOMFiberSelect.getHostProps(domElement, lastRawProps);
       nextProps = ReactDOMFiberSelect.getHostProps(domElement, nextRawProps);

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

@@ -7,30 +7,10 @@
  * @flow
  */
 
-import React from 'react';
 import warning from 'fbjs/lib/warning';
 
 let didWarnSelectedSetOnOption = false;
 
-function flattenChildren(children) {
-  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 content;
-}
-
 /**
  * Implements an <option> host component that warns when `selected` is set.
  */
@@ -55,14 +35,3 @@ export function postMountWrapper(element: Element, props: Object) {
     element.setAttribute('value', props.value);
   }
 }
-
-export function getHostProps(element: Element, props: Object) {
-  const hostProps = {children: undefined, ...props};
-  const content = flattenChildren(props.children);
-
-  if (content) {
-    hostProps.children = content;
-  }
-
-  return hostProps;
-}

packages/react-dom/src/server/ReactPartialRenderer.js

@@ -241,15 +241,15 @@ function flattenTopLevelChildren(children: mixed): FlatReactChildren {
 }
 
 function flattenOptionChildren(children: mixed): string {
-  let content = '';
+  let content = [];
   // Flatten children and warn if they aren't strings or numbers;
   // invalid types are ignored.
   React.Children.forEach(children, function(child) {
     if (child == null) {
       return;
     }
     if (typeof child === 'string' || typeof child === 'number') {
-      content += child;
+      content.push(child);
     } else {
       if (__DEV__) {
         if (!didWarnInvalidOptionChildren) {
@@ -887,7 +887,7 @@ class ReactDOMServerRenderer {
         if (props.value != null) {
           value = props.value + '';
         } else {
-          value = optionChildren;
+          value = optionChildren.join('');
         }
         selected = false;
         if (Array.isArray(selectValue)) {