Don't set empty placeholder to work around IE11 bug (#11177)

* Don't set empty placeholder to work around IE11 bug

* Add fixture for textarea placeholders

fixtures/dom/src/components/fixtures/textareas/index.js

@@ -1,34 +1,47 @@
+import FixtureSet from '../../FixtureSet';
+import TestCase from '../../TestCase';
+
 const React = window.React;
 
-class TextAreaFixtures extends React.Component {
+export default class TextAreaFixtures extends React.Component {
   state = {value: ''};
   onChange = event => {
     this.setState({value: event.target.value});
   };
   render() {
     return (
-      <div>
-        <form className="container">
-          <fieldset>
-            <legend>Controlled</legend>
-            <textarea value={this.state.value} onChange={this.onChange} />
-          </fieldset>
-
-          <fieldset>
-            <legend>Uncontrolled</legend>
-            <textarea defaultValue="" />
-          </fieldset>
-        </form>
-
-        <div className="container">
-          <h4>Controlled Output:</h4>
-          <div className="output">
-            {this.state.value}
+      <FixtureSet title="Textareas">
+        <TestCase
+          title="Kitchen Sink"
+          description="Verify that the controlled textarea displays its value under 'Controlled Output', and that both textareas can be typed in">
+          <div>
+            <form className="container">
+              <fieldset>
+                <legend>Controlled</legend>
+                <textarea value={this.state.value} onChange={this.onChange} />
+              </fieldset>
+              <fieldset>
+                <legend>Uncontrolled</legend>
+                <textarea defaultValue="" />
+              </fieldset>
+            </form>
+            <div className="container">
+              <h4>Controlled Output:</h4>
+              <div className="output">
+                {this.state.value}
+              </div>
+            </div>
           </div>
-        </div>
-      </div>
+        </TestCase>
+        <TestCase title="Placeholders">
+          <TestCase.ExpectedResult>
+            The textarea should be rendered with the placeholder "Hello, world"
+          </TestCase.ExpectedResult>
+          <div style={{margin: '10px 0px'}}>
+            <textarea placeholder="Hello, world" />
+          </div>
+        </TestCase>
+      </FixtureSet>
     );
   }
 }
-
-module.exports = TextAreaFixtures;

src/renderers/dom/fiber/ReactDOMFiberComponent.js

@@ -243,6 +243,7 @@ function trapClickOnNonInteractiveElement(node: HTMLElement) {
 }
 
 function setInitialDOMProperties(
+  tag: string,
   domElement: Element,
   rootContainerElement: Element | Document,
   nextProps: Object,
@@ -270,7 +271,14 @@ function setInitialDOMProperties(
       }
     } else if (propKey === CHILDREN) {
       if (typeof nextProp === 'string') {
-        setTextContent(domElement, nextProp);
+        // Avoid setting initial textContent when the text is empty. In IE11 setting
+        // textContent on a <textarea> will cause the placeholder to not
+        // show within the <textarea> until it has been focused and blurred again.
+        // https://github.com/facebook/react/issues/6731#issuecomment-254874553
+        var canSetTextContent = tag !== 'textarea' || nextProp !== '';
+        if (canSetTextContent) {
+          setTextContent(domElement, nextProp);
+        }
       } else if (typeof nextProp === 'number') {
         setTextContent(domElement, '' + nextProp);
       }
@@ -550,6 +558,7 @@ var ReactDOMFiberComponent = {
     assertValidProps(tag, props, getCurrentFiberOwnerName);
 
     setInitialDOMProperties(
+      tag,
       domElement,
       rootContainerElement,
       props,