Fix multiple text nodes in an option tag

Author: jorrit

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

@@ -499,7 +499,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);
@@ -581,11 +581,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,28 +7,8 @@
  * @flow
  */
 
-import React from 'react';
 import warning from 'fbjs/lib/warning';
 
-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.
  */
@@ -50,14 +30,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

@@ -830,13 +830,12 @@ class ReactDOMServerRenderer {
     } else if (tag === 'option') {
       var selected = null;
       var selectValue = this.currentSelectValue;
-      var optionChildren = flattenOptionChildren(props.children);
       if (selectValue != null) {
         var value;
         if (props.value != null) {
           value = props.value + '';
         } else {
-          value = optionChildren;
+          value = flattenOptionChildren(props.children);
         }
         selected = false;
         if (Array.isArray(selectValue)) {
@@ -851,17 +850,9 @@ class ReactDOMServerRenderer {
           selected = '' + selectValue === value;
         }
 
-        props = Object.assign(
-          {
-            selected: undefined,
-            children: undefined,
-          },
-          props,
-          {
-            selected: selected,
-            children: optionChildren,
-          },
-        );
+        props = Object.assign({}, props, {
+          selected: selected,
+        });
       }
     }