Correctly render placeholder for textarea in IE11 (#8020)
* Check if textContent should be set for textarea shouldSetNodeTextContent returns whether a node.textContent should be updated. Currently it only covers one case, which is to avoid setting the textContent if the text is empty and a placeholder exists. * Only set node.value if it's equal to initialValue In IE11 textContent is populated when the placeholder attribute is set. Without this check, we end up setting node.value equal to the placeholder text, causing the textarea to actually render with the text inside. This check makes sure that textContent is equal to our expected initialValue, which should be the case when using defaultValue. * Remove placeholder/textarea check, use contentToUse instead
Brandon Dail committed
Nov 5, 2016 at 11:47 UTC
e644faa6104ca6301c88ce4a535237b76450422b
2 files changed
+19
-7
src/renderers/dom/stack/client/ReactDOMComponent.js
+10
-4
@@ -869,12 +869,18 @@ ReactDOMComponent.Mixin = {
869
var contentToUse =
870
CONTENT_TYPES[typeof props.children] ? props.children : null;
871
var childrenToUse = contentToUse != null ? null : props.children;
872
+ // TODO: Validate that text is allowed as a child of this node
873
if (contentToUse != null) {
873
- // TODO: Validate that text is allowed as a child of this node
874
- if (__DEV__) {
875
- setAndValidateContentChildDev.call(this, contentToUse);
874
+ // Avoid setting textContent when the text is empty. In IE11 setting
875
+ // textContent on a text area will cause the placeholder to not
876
+ // show within the textarea until it has been focused and blurred again.
877
+ // https://github.com/facebook/react/issues/6731#issuecomment-254874553
878
+ if (contentToUse !== '') {
879
+ if (__DEV__) {
880
+ setAndValidateContentChildDev.call(this, contentToUse);
881
+ }
882
+ DOMLazyTree.queueText(lazyTree, contentToUse);
883
}
877
- DOMLazyTree.queueText(lazyTree, contentToUse);
884
} else if (childrenToUse != null) {
885
var mountImages = this.mountChildren(
886
childrenToUse,
src/renderers/dom/stack/client/wrappers/ReactDOMTextarea.js
+9
-3
@@ -159,9 +159,15 @@ var ReactDOMTextarea = {
159
// This is in postMount because we need access to the DOM node, which is not
160
// available until after the component has mounted.
161
var node = ReactDOMComponentTree.getNodeFromInstance(inst);
162
-
163
- // Warning: node.value may be the empty string at this point (IE11) if placeholder is set.
164
- node.value = node.textContent; // Detach value from defaultValue
162
+ var textContent = node.textContent;
163
+
164
+ // Only set node.value if textContent is equal to the expected
165
+ // initial value. In IE10/IE11 there is a bug where the placeholder attribute
166
+ // will populate textContent as well.
167
+ // https://developer.microsoft.com/microsoft-edge/platform/issues/101525/
168
+ if (textContent === inst._wrapperState.initialValue) {
169
+ node.value = textContent;
170
+ }
171
},
172
};
173