From 9e99b8e94c9199299e9c8374052cfa34d953e9e3 Mon Sep 17 00:00:00 2001 From: Brandon Dail Date: Wed, 19 Oct 2016 16:16:53 -0500 Subject: [PATCH 1/3] 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. --- .../dom/stack/client/ReactDOMComponent.js | 23 +++++++++++++++---- 1 file changed, 19 insertions(+), 4 deletions(-) diff --git a/src/renderers/dom/stack/client/ReactDOMComponent.js b/src/renderers/dom/stack/client/ReactDOMComponent.js index 0da69549284..2486931e95d 100644 --- a/src/renderers/dom/stack/client/ReactDOMComponent.js +++ b/src/renderers/dom/stack/client/ReactDOMComponent.js @@ -461,6 +461,20 @@ function isCustomComponent(tagName, props) { return tagName.indexOf('-') >= 0 || props.is != null; } +function shouldSetNodeTextContent(lazyTree, props, text) { + // TODO: Validate that text is allowed as a child of this node + var node = lazyTree.node; + // Avoid setting textContent on textareas when the text is empty + // and there is a placeholder. In IE11 setting textContent 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 (node.type === 'textarea' && props.placeholder && text === '') { + return false; + } + return true; +} + var globalIdCounter = 1; /** @@ -848,11 +862,12 @@ ReactDOMComponent.Mixin = { CONTENT_TYPES[typeof props.children] ? props.children : null; var childrenToUse = contentToUse != null ? null : props.children; if (contentToUse != null) { - // TODO: Validate that text is allowed as a child of this node - if (__DEV__) { - setAndValidateContentChildDev.call(this, contentToUse); + if (shouldSetNodeTextContent(lazyTree, props, contentToUse)) { + if (__DEV__) { + setAndValidateContentChildDev.call(this, contentToUse); + } + DOMLazyTree.queueText(lazyTree, contentToUse); } - DOMLazyTree.queueText(lazyTree, contentToUse); } else if (childrenToUse != null) { var mountImages = this.mountChildren( childrenToUse, From 1462e434abd0ea55c917e6b8a925181c275c28ea Mon Sep 17 00:00:00 2001 From: Brandon Dail Date: Wed, 19 Oct 2016 16:21:34 -0500 Subject: [PATCH 2/3] 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. --- .../dom/stack/client/wrappers/ReactDOMTextarea.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/renderers/dom/stack/client/wrappers/ReactDOMTextarea.js b/src/renderers/dom/stack/client/wrappers/ReactDOMTextarea.js index 10696bb698f..3e3ed791293 100644 --- a/src/renderers/dom/stack/client/wrappers/ReactDOMTextarea.js +++ b/src/renderers/dom/stack/client/wrappers/ReactDOMTextarea.js @@ -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); - - // Warning: node.value may be the empty string at this point (IE11) if placeholder is set. - node.value = node.textContent; // Detach value from defaultValue + var textContent = node.textContent; + + // 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; + } }, }; From 561b8f2875756eb8d53577436686bd802f7845e6 Mon Sep 17 00:00:00 2001 From: Brandon Dail Date: Wed, 19 Oct 2016 18:14:07 -0500 Subject: [PATCH 3/3] Remove placeholder/textarea check, use contentToUse instead --- .../dom/stack/client/ReactDOMComponent.js | 21 ++++++------------- 1 file changed, 6 insertions(+), 15 deletions(-) diff --git a/src/renderers/dom/stack/client/ReactDOMComponent.js b/src/renderers/dom/stack/client/ReactDOMComponent.js index 2486931e95d..5ba3bb1bde1 100644 --- a/src/renderers/dom/stack/client/ReactDOMComponent.js +++ b/src/renderers/dom/stack/client/ReactDOMComponent.js @@ -461,20 +461,6 @@ function isCustomComponent(tagName, props) { return tagName.indexOf('-') >= 0 || props.is != null; } -function shouldSetNodeTextContent(lazyTree, props, text) { - // TODO: Validate that text is allowed as a child of this node - var node = lazyTree.node; - // Avoid setting textContent on textareas when the text is empty - // and there is a placeholder. In IE11 setting textContent 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 (node.type === 'textarea' && props.placeholder && text === '') { - return false; - } - return true; -} - var globalIdCounter = 1; /** @@ -861,8 +847,13 @@ 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) { - if (shouldSetNodeTextContent(lazyTree, props, 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); }