diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js index b03f9ed36425b..ffbac25abeb32 100644 --- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js +++ b/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( + , + 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'); + } + }, + ); }); }); diff --git a/packages/react-dom/src/client/ReactDOMFiberComponent.js b/packages/react-dom/src/client/ReactDOMFiberComponent.js index 6959351fe095b..0c3dfd282ce90 100644 --- a/packages/react-dom/src/client/ReactDOMFiberComponent.js +++ 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); diff --git a/packages/react-dom/src/client/ReactDOMFiberOption.js b/packages/react-dom/src/client/ReactDOMFiberOption.js index 663b9cf22cc77..2b8ec6f6ebe2c 100644 --- a/packages/react-dom/src/client/ReactDOMFiberOption.js +++ b/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