Avoid innerText for better newline behavior
Fixes #1080.
Ben Alpert committed
Feb 13, 2014 at 17:43 UTC
b98f1adf1acc18837af498c86a617858548abe28
2 files changed
+32
-11
src/browser/ReactDOMIDOperations.js
+1
-10
@@ -27,7 +27,6 @@ var DOMPropertyOperations = require('DOMPropertyOperations');
27
var ReactMount = require('ReactMount');
28
var ReactPerf = require('ReactPerf');
29
30
-var getTextContentAccessor = require('getTextContentAccessor');
30
var invariant = require('invariant');
31
32
/**
@@ -42,14 +41,6 @@ var INVALID_PROPERTY_ERRORS = {
41
style: '`style` must be set using `updateStylesByID()`.'
42
};
43
45
-/**
46
- * The DOM property to use when setting text content.
47
- *
48
- * @type {string}
49
- * @private
50
- */
51
-var textContentAccessor = getTextContentAccessor();
52
-
44
var useWhitespaceWorkaround;
45
46
/**
@@ -184,7 +175,7 @@ var ReactDOMIDOperations = {
175
'updateTextContentByID',
176
function(id, content) {
177
var node = ReactMount.getNode(id);
187
- node[textContentAccessor] = content;
178
+ DOMChildrenOperations.updateTextContent(node, content);
179
}
180
),
181
src/browser/dom/DOMChildrenOperations.js
+31
-1
@@ -57,6 +57,31 @@ function insertChildAt(parentNode, childNode, index) {
57
}
58
}
59
60
+/**
61
+ * Sets the text content of `node` to `text`.
62
+ *
63
+ * @param {DOMElement} node Node to change
64
+ * @param {string} text New text content
65
+ */
66
+var updateTextContent;
67
+if (textContentAccessor === 'textContent') {
68
+ updateTextContent = function(node, text) {
69
+ node.textContent = text;
70
+ };
71
+} else {
72
+ updateTextContent = function(node, text) {
73
+ // In order to preserve newlines correctly, we can't use .innerText to set
74
+ // the contents (see #1080), so we empty the element then append a text node
75
+ while (node.firstChild) {
76
+ node.removeChild(node.firstChild);
77
+ }
78
+ if (text) {
79
+ var doc = node.ownerDocument || document;
80
+ node.appendChild(doc.createTextNode(text));
81
+ }
82
+ };
83
+}
84
+
85
/**
86
* Operations for updating with DOM children.
87
*/
@@ -64,6 +89,8 @@ var DOMChildrenOperations = {
89
90
dangerouslyReplaceNodeWithMarkup: Danger.dangerouslyReplaceNodeWithMarkup,
91
92
+ updateTextContent: updateTextContent,
93
+
94
/**
95
* Updates a component's children by processing a series of updates. The
96
* update configurations are each expected to have a `parentNode` property.
@@ -121,7 +148,10 @@ var DOMChildrenOperations = {
148
);
149
break;
150
case ReactMultiChildUpdateTypes.TEXT_CONTENT:
124
- update.parentNode[textContentAccessor] = update.textContent;
151
+ updateTextContent(
152
+ update.parentNode,
153
+ update.textContent
154
+ );
155
break;
156
case ReactMultiChildUpdateTypes.REMOVE_NODE:
157
// Already removed by the for-loop above.