Prevent incorrect options SSR hydrate mismatch, fix facebook#11602

Avoid overwrite options children nodes when setting the selected option.
t4deu · Jan 24, 2018 · 0a5f6e4 · 0a5f6e4
1 parent 4ca7855
commit 0a5f6e4
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 1 deletion.
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationForms-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationForms-test.js
@@ -11,6 +11,8 @@
 
 const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
 
+const TEXT_NODE_TYPE = 3;
+
 let React;
 let ReactDOM;
 let ReactDOMServer;
@@ -37,6 +39,8 @@ const {
   itClientRenders,
   renderIntoDom,
   serverRender,
+  streamRender,
+  clientRenderOnServerString,
 } = ReactDOMServerIntegrationUtils(initModules);
 
 describe('ReactDOMServerIntegration', () => {
@@ -45,6 +49,11 @@ describe('ReactDOMServerIntegration', () => {
   });
 
   describe('form controls', function() {
+    function expectNode(node, type, value) {
+      expect(node).not.toBe(null);
+      expect(node.nodeType).toBe(type);
+      expect(node.nodeValue).toMatch(value);
+    }
     describe('inputs', function() {
       itRenders('an input with a value and an onChange', async render => {
         const e = await render(<input value="foo" onChange={() => {}} />);
@@ -341,6 +350,31 @@ describe('ReactDOMServerIntegration', () => {
       );
     });
 
+    describe('options', function() {
+      itRenders('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.options[0];
+        if (
+          render === serverRender ||
+          render === streamRender ||
+          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(1);
+          expectNode(option.childNodes[0], TEXT_NODE_TYPE, 'A B');
+        }
+      });
+    });
+
     describe('user interaction', function() {
       let ControlledInput,
         ControlledTextArea,

diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js
@@ -1002,7 +1002,6 @@ class ReactDOMServerRenderer {
           props,
           {
             selected: selected,
-            children: optionChildren,
           },
         );
       }