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.
This commit is contained in:
Ben Alpert
2014-10-22 17:24:24 -07:00
committed by Ben Alpert
parent b78fe39b60
commit 9c2125599c
2 changed files with 18 additions and 8 deletions
+14 -4
View File
@@ -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) {
@@ -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');