hanzoai/react
2
0
Fork 0
mirror of https://github.com/hanzoai/react.git synced 2026-09-24 17:02:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

Correctly render placeholder for textarea in IE11 (#8020)

Browse Source 
* 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
This commit is contained in:
Brandon Dail
2016-11-05 11:47:54 -05:00
committed by GitHub
parent 67ac925bb1
commit 2e91a8395f
2 changed files with 18 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderers/dom/stack/client/ReactDOMComponent.js
+10 -4
View File
@@ -869,12 +869,18 @@ ReactDOMComponent.Mixin = {
var contentToUse =
CONTENT_TYPES[typeof props.children] ? props.children : null;
var childrenToUse = contentToUse != null ? null : props.children;
// TODO: Validate that text is allowed as a child of this node
if (contentToUse != null) {
// TODO: Validate that text is allowed as a child of this node
if (__DEV__) {
setAndValidateContentChildDev.call(this, contentToUse);
// Avoid setting textContent when the text is empty. In IE11 setting
// textContent on a text area will cause the placeholder to not
// show within the textarea until it has been focused and blurred again.
// https://github.com/facebook/react/issues/6731#issuecomment-254874553
if (contentToUse !== '') {
if (__DEV__) {
setAndValidateContentChildDev.call(this, contentToUse);
}
DOMLazyTree.queueText(lazyTree, contentToUse);
}
DOMLazyTree.queueText(lazyTree, contentToUse);
} else if (childrenToUse != null) {
var mountImages = this.mountChildren(
childrenToUse,
src/renderers/dom/stack/client/wrappers/ReactDOMTextarea.js
+8 -2
View File
@@ -159,9 +159,15 @@ var ReactDOMTextarea = {
// This is in postMount because we need access to the DOM node, which is not
// available until after the component has mounted.
var node = ReactDOMComponentTree.getNodeFromInstance(inst);
var textContent = node.textContent;
// Warning: node.value may be the empty string at this point (IE11) if placeholder is set.
node.value = node.textContent; // Detach value from defaultValue
// Only set node.value if textContent is equal to the expected
// initial value. In IE10/IE11 there is a bug where the placeholder attribute
// will populate textContent as well.
// https://developer.microsoft.com/microsoft-edge/platform/issues/101525/
if (textContent === inst._wrapperState.initialValue) {
node.value = textContent;
}
},
};