diff --git a/packages/react-dom/src/client/ReactDOMFiberComponent.js b/packages/react-dom/src/client/ReactDOMFiberComponent.js index 733432cd26e..23784469176 100644 --- a/packages/react-dom/src/client/ReactDOMFiberComponent.js +++ b/packages/react-dom/src/client/ReactDOMFiberComponent.js @@ -483,6 +483,7 @@ export function setInitialProperties( case 'option': ReactDOMFiberOption.validateProps(domElement, rawProps); props = ReactDOMFiberOption.getHostProps(domElement, rawProps); + ReactDOMFiberOption.reduceOptionChild(domElement); break; case 'select': ReactDOMFiberSelect.initWrapperState(domElement, rawProps); diff --git a/packages/react-dom/src/client/ReactDOMFiberOption.js b/packages/react-dom/src/client/ReactDOMFiberOption.js index 663b9cf22cc..12c90d0a56d 100644 --- a/packages/react-dom/src/client/ReactDOMFiberOption.js +++ b/packages/react-dom/src/client/ReactDOMFiberOption.js @@ -23,8 +23,17 @@ function flattenChildren(children) { if (child == null) { return; } + if (typeof child === 'string' || typeof child === 'number') { - content += child; + if (typeof children === 'string') { + content += child; + } else { + if (!content) { + content = document.createElement('span'); + } + const textNode = document.createTextNode(child); + content.appendChild(textNode); + } } }); @@ -66,3 +75,11 @@ export function getHostProps(element: Element, props: Object) { return hostProps; } + +export function reduceOptionChild(node: Element) { + for (let i = 0; i < node.childNodes.length; i += 1) { + if (node.childNodes[i].nodeType !== 3) { + node.removeChild(node.childNodes[i]); + } + } +} diff --git a/scripts/rollup/results.json b/scripts/rollup/results.json index a53f77637e6..6684eda3bc9 100644 --- a/scripts/rollup/results.json +++ b/scripts/rollup/results.json @@ -46,43 +46,43 @@ "filename": "react-dom.development.js", "bundleType": "UMD_DEV", "packageName": "react-dom", - "size": 569094, - "gzip": 133855 + "size": 569227, + "gzip": 133885 }, { "filename": "react-dom.production.min.js", "bundleType": "UMD_PROD", "packageName": "react-dom", - "size": 94278, - "gzip": 30883 + "size": 94375, + "gzip": 30893 }, { "filename": "react-dom.development.js", "bundleType": "NODE_DEV", "packageName": "react-dom", - "size": 553111, - "gzip": 130124 + "size": 553244, + "gzip": 130155 }, { "filename": "react-dom.production.min.js", "bundleType": "NODE_PROD", "packageName": "react-dom", - "size": 92696, - "gzip": 29923 + "size": 92793, + "gzip": 29943 }, { "filename": "ReactDOM-dev.js", "bundleType": "FB_DEV", "packageName": "react-dom", - "size": 571833, - "gzip": 132486 + "size": 571966, + "gzip": 132522 }, { "filename": "ReactDOM-prod.js", "bundleType": "FB_PROD", "packageName": "react-dom", - "size": 267496, - "gzip": 51395 + "size": 267649, + "gzip": 51426 }, { "filename": "react-dom-test-utils.development.js",