From 9c2125599c15f36b0934384a64cb779b92b83485 Mon Sep 17 00:00:00 2001
From: Ben Alpert <spicyjalapeno@gmail.com>
Date: Fri, 29 Aug 2014 23:37:14 -0700
Subject: [PATCH] Add \n after <textarea> to fix missing linebreaks

Same for <pre> and <listing>. Browsers are crazy.

Test Plan: jest, verify in Chrome that starting textareas with a value starting with two newlines renders both newlines instead of one newline, as it did before.
---
 src/browser/ui/ReactDOMComponent.js            | 18 ++++++++++++++----
 .../__tests__/ReactDOMTextarea-test.js         |  8 ++++----
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/browser/ui/ReactDOMComponent.js b/src/browser/ui/ReactDOMComponent.js
index 62fe8f0be9..72a4aadf8b 100644
--- a/src/browser/ui/ReactDOMComponent.js
+++ b/src/browser/ui/ReactDOMComponent.js
@@ -244,27 +244,37 @@ ReactDOMComponent.Mixin = {
    * @return {string} Content markup.
    */
   _createContentMarkup: function(transaction) {
+    var prefix = '';
+    if (this._tag === 'listing' ||
+        this._tag === 'pre' ||
+        this._tag === 'textarea') {
+      // Add an initial newline because browsers ignore the first newline in
+      // a <listing>, <pre>, or <textarea> as an "authoring convenience" -- see
+      // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inbody.
+      prefix = '\n';
+    }
+
     // Intentional use of != to avoid catching zero/false.
     var innerHTML = this.props.dangerouslySetInnerHTML;
     if (innerHTML != null) {
       if (innerHTML.__html != null) {
-        return innerHTML.__html;
+        return prefix + innerHTML.__html;
       }
     } else {
       var contentToUse =
         CONTENT_TYPES[typeof this.props.children] ? this.props.children : null;
       var childrenToUse = contentToUse != null ? null : this.props.children;
       if (contentToUse != null) {
-        return escapeTextForBrowser(contentToUse);
+        return prefix + escapeTextForBrowser(contentToUse);
       } else if (childrenToUse != null) {
         var mountImages = this.mountChildren(
           childrenToUse,
           transaction
         );
-        return mountImages.join('');
+        return prefix + mountImages.join('');
       }
     }
-    return '';
+    return prefix;
   },
 
   receiveComponent: function(nextElement, transaction) {
diff --git a/src/browser/ui/dom/components/__tests__/ReactDOMTextarea-test.js b/src/browser/ui/dom/components/__tests__/ReactDOMTextarea-test.js
index cad4a94d9b..7517691913 100644
--- a/src/browser/ui/dom/components/__tests__/ReactDOMTextarea-test.js
+++ b/src/browser/ui/dom/components/__tests__/ReactDOMTextarea-test.js
@@ -29,8 +29,9 @@ describe('ReactDOMTextarea', function() {
     renderTextarea = function(component) {
       var stub = ReactTestUtils.renderIntoDocument(component);
       var node = stub.getDOMNode();
-      // Polyfilling the browser's quirky behavior.
-      node.value = node.innerHTML;
+      // Fixing jsdom's quirky behavior -- in reality, the parser should strip
+      // off the leading newline but we need to do it by hand here.
+      node.value = node.innerHTML.replace(/^\n/, '');
       return stub;
     };
   });
@@ -215,11 +216,10 @@ describe('ReactDOMTextarea', function() {
   });
 
   it('should support ReactLink', function() {
-    var container = document.createElement('div');
     var link = new ReactLink('yolo', mocks.getMockFunction());
     var instance = <textarea valueLink={link} />;
 
-    instance = React.render(instance, container);
+    instance = renderTextarea(instance);
 
     expect(instance.getDOMNode().value).toBe('yolo');
     expect(link.value).toBe('yolo');