Merge pull request facebook#8520 from bvaughn/do-not-reset-inner-html…

…-for-null-children

Do not reset inner html for null children

scripts/fiber/tests-passing.txt

@@ -602,6 +602,8 @@ src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
 * should update arbitrary attributes for tags containing dashes
 * should clear all the styles when removing `style`
 * should update styles when `style` changes from null to object
+* should not reset innerHTML for when children is null
+* should reset innerHTML when switching from a direct text child to an empty child
 * should empty element when removing innerHTML
 * should transition from string content to innerHTML
 * should transition from innerHTML to string content

src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js

@@ -416,6 +416,32 @@ describe('ReactDOMComponent', () => {
       expect(stubStyle.color).toEqual('red');
     });
 
+    it('should not reset innerHTML for when children is null', () => {
+      var container = document.createElement('div');
+      ReactDOM.render(<div />, container);
+      container.firstChild.innerHTML = 'bonjour';
+      expect(container.firstChild.innerHTML).toEqual('bonjour');
+
+      ReactDOM.render(<div />, container);
+      expect(container.firstChild.innerHTML).toEqual('bonjour');
+    });
+
+    it('should reset innerHTML when switching from a direct text child to an empty child', () => {
+      const transitionToValues = [
+        null,
+        undefined,
+        false,
+      ];
+      transitionToValues.forEach((transitionToValue) => {
+        var container = document.createElement('div');
+        ReactDOM.render(<div>bonjour</div>, container);
+        expect(container.firstChild.innerHTML).toEqual('bonjour');
+
+        ReactDOM.render(<div>{transitionToValue}</div>, container);
+        expect(container.firstChild.innerHTML).toEqual('');
+      });
+    });
+
     it('should empty element when removing innerHTML', () => {
       var container = document.createElement('div');
       ReactDOM.render(<div dangerouslySetInnerHTML={{__html: ':)'}} />, container);

src/renderers/shared/fiber/ReactFiberBeginWork.js

@@ -217,18 +217,17 @@ module.exports = function<T, P, I, TI, C>(
     const prevProps = current ? current.memoizedProps : null;
     let nextChildren = nextProps.children;
     const isDirectTextChild = shouldSetTextContent(nextProps);
+
     if (isDirectTextChild) {
       // We special case a direct text child of a host node. This is a common
       // case. We won't handle it as a reified child. We will instead handle
       // this in the host environment that also have access to this prop. That
       // avoids allocating another HostText fiber and traversing it.
       nextChildren = null;
-    } else if (prevProps && (
-      shouldSetTextContent(prevProps) ||
-      prevProps.children === null ||
-      typeof prevProps.children === 'undefined' ||
-      typeof prevProps.children === 'boolean'
-    )) {
+    } else if (
+      prevProps &&
+      shouldSetTextContent(prevProps)
+    ) {
       // If we're switching from a direct text child to a normal child, or to
       // empty, we need to schedule the text content to be reset.
       workInProgress.effectTag |= ContentReset;