fix: React DOM crashes when <option> contains three interpolated valu…

…e if one is a conditional. facebook#11911
stephenkingsley · Jan 23, 2018 · 752acda · 752acda
1 parent 4d65408
commit 752acda
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 14 deletions.
diff --git a/packages/react-dom/src/__tests__/ReactDOMOption-test.js b/packages/react-dom/src/__tests__/ReactDOMOption-test.js
@@ -46,7 +46,7 @@ describe('ReactDOMOption', () => {
         '    in div (at **)\n' +
         '    in option (at **)',
     );
-    expect(node.innerHTML).toBe('1  2');
+    expect(node.innerHTML).toBe('1 <div></div> 2');
     ReactTestUtils.renderIntoDocument(el);
   });
 

diff --git 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);
+      }
     }
   });
 

diff --git 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",