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.
Ben Alpert committed
Aug 29, 2014 at 23:37 UTC
9c2125599c15f36b0934384a64cb779b92b83485
2 files changed
+18
-8
src/browser/ui/ReactDOMComponent.js
+14
-4
@@ -244,27 +244,37 @@ ReactDOMComponent.Mixin = {
244
* @return {string} Content markup.
245
*/
246
_createContentMarkup: function(transaction) {
247
+ var prefix = '';
248
+ if (this._tag === 'listing' ||
249
+ this._tag === 'pre' ||
250
+ this._tag === 'textarea') {
251
+ // Add an initial newline because browsers ignore the first newline in
252
+ // a <listing>, <pre>, or <textarea> as an "authoring convenience" -- see
253
+ // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inbody.
254
+ prefix = '\n';
255
+ }
256
+
257
// Intentional use of != to avoid catching zero/false.
258
var innerHTML = this.props.dangerouslySetInnerHTML;
259
if (innerHTML != null) {
260
if (innerHTML.__html != null) {
251
- return innerHTML.__html;
261
+ return prefix + innerHTML.__html;
262
}
263
} else {
264
var contentToUse =
265
CONTENT_TYPES[typeof this.props.children] ? this.props.children : null;
266
var childrenToUse = contentToUse != null ? null : this.props.children;
267
if (contentToUse != null) {
258
- return escapeTextForBrowser(contentToUse);
268
+ return prefix + escapeTextForBrowser(contentToUse);
269
} else if (childrenToUse != null) {
270
var mountImages = this.mountChildren(
271
childrenToUse,
272
transaction
273
);
264
- return mountImages.join('');
274
+ return prefix + mountImages.join('');
275
}
276
}
267
- return '';
277
+ return prefix;
278
},
279
280
receiveComponent: function(nextElement, transaction) {
src/browser/ui/dom/components/__tests__/ReactDOMTextarea-test.js
+4
-4
@@ -29,8 +29,9 @@ describe('ReactDOMTextarea', function() {
29
renderTextarea = function(component) {
30
var stub = ReactTestUtils.renderIntoDocument(component);
31
var node = stub.getDOMNode();
32
- // Polyfilling the browser's quirky behavior.
33
- node.value = node.innerHTML;
32
+ // Fixing jsdom's quirky behavior -- in reality, the parser should strip
33
+ // off the leading newline but we need to do it by hand here.
34
+ node.value = node.innerHTML.replace(/^\n/, '');
35
return stub;
36
};
37
});
@@ -215,11 +216,10 @@ describe('ReactDOMTextarea', function() {
216
});
217
218
it('should support ReactLink', function() {
218
- var container = document.createElement('div');
219
var link = new ReactLink('yolo', mocks.getMockFunction());
220
var instance = <textarea valueLink={link} />;
221
222
- instance = React.render(instance, container);
222
+ instance = renderTextarea(instance);
223
224
expect(instance.getDOMNode().value).toBe('yolo');
225
expect(link.value).toBe('yolo');