Correctly render placeholder for textarea in IE11 #8020

aweary · 2016-10-19T21:32:25Z

Resolves #6731

In IE11, setting the node.placeholder will also set node.textContent, so when we ended up setting textContent to "" via DOMLazyTree.queueText in in _createInitialChildren , it caused the placeholder to never show up.

18d418a resolves this by checking if the <textarea/> has a placeholder and text is empty. If it is, it skips queueText.

We were also unconditionally setting node.value = node.textContent, which before 18d418a just meant we'd set it to an empty string, but now we're setting node.value equal to the placeholder in IE11.

07998a5 resolves this by only setting node.value if textContent is our expected initialValue.

Test plan

Tested with this component, which contains uncontrolled/controlled <textarea/>s with and without defaultValue/placeholder

Tested in the following browsers:

IE10
IE11
Firefox 49
Chrome 53
Safari 9
Safari 10
iOS 9 (Safari)
iOS 8 (Safari)

cc @spicyj @sebmarkbage

sophiebits · 2016-10-19T22:34:10Z

src/renderers/dom/shared/ReactDOMComponent.js

-        // TODO: Validate that text is allowed as a child of this node
-        if (__DEV__) {
-          setAndValidateContentChildDev.call(this, contentToUse);
+        if (shouldSetNodeTextContent(lazyTree, props, contentToUse)) {


Let's just do contentToUse !== '' here (and move the comment you have above down here to explain). No need to check for textarea/placeholder.

Sounds good, I wasn't totally sure if there were situations where setting textContent to an empty string was valid.

I don't know of any. :)

sophiebits · 2016-10-19T22:34:40Z

src/renderers/dom/client/wrappers/ReactDOMTextarea.js

+    // 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) {


Sorry, when is this not true?

This is false in IE11 when placeholder has been set on a text area. There's a bug (linked in the comment above) where setting placeholder also sets textContent.

The bug report specifically mentions innerHTML and innerText, but it also effects textContent

aweary · 2016-10-19T23:18:33Z

@spicyj removed shouldUpdateTextNode and added that contentToUse check instead.

sophiebits

My understanding is:

If you render <textarea defaultValue="A" /> then <textarea defaultValue="B" /> then .value should be A and you should see A in the textarea.

If you start with the empty string instead of A then .value should stay as '' (and you should see the placeholder).

Can you confirm that these still work? I'm concerned that in the second case, .value will change to B when you change defaultValue="" to defaultValue="B".

Accepting contingent on this working properly. If it doesn't, let's do another round.

sophiebits · 2016-10-30T04:59:54Z

src/renderers/dom/shared/ReactDOMComponent.js

-        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


aweary · 2016-11-03T19:11:45Z

Can you confirm that these still work? I'm concerned that in the second case, .value will change to B when you change defaultValue="" to defaultValue="B".

@spicyj It looks like it retains the initial empty value and the placeholder remains visible. Here's a JSFiddle with a build that includes this change, demonstrating the behavior: https://jsfiddle.net/e2Lqbc8r/

sophiebits · 2016-11-03T20:19:44Z

Cool. I don't have an IE handy but if you tested that case, feel free to ship this.

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.

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.

aweary · 2016-11-05T16:47:47Z

Tested in IE11 and IE10 👍

* 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 (cherry picked from commit e644faa)

gaearon · 2017-01-06T20:51:42Z

This should be out in 15.4.2.
Please verify.

* 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

facebook-github-bot added GH Review: review-needed CLA Signed labels Oct 19, 2016

aweary force-pushed the fix-placeholder-textarea-IE11 branch from 07998a5 to cb79db5 Compare October 19, 2016 21:43

sophiebits reviewed Oct 19, 2016

View reviewed changes

aweary force-pushed the fix-placeholder-textarea-IE11 branch from 331aa88 to 1e3331d Compare October 19, 2016 23:17

facebook-github-bot added the CLA Signed label Oct 21, 2016

sophiebits approved these changes Oct 30, 2016

View reviewed changes

Brandon Dail added 3 commits November 3, 2016 15:35

Check if textContent should be set for textarea

9e99b8e

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.

Remove placeholder/textarea check, use contentToUse instead

561b8f2

aweary force-pushed the fix-placeholder-textarea-IE11 branch from 1e3331d to 561b8f2 Compare November 3, 2016 20:36

aweary merged commit e644faa into facebook:master Nov 5, 2016

aweary added GH Review: accepted and removed GH Review: review-needed labels Nov 5, 2016

aweary added this to the 15-next milestone Nov 5, 2016

Lkroner mentioned this pull request Dec 10, 2016

Textarea placeholder isn't shown in IE 11 being rendered using React #8546

Closed

gaearon modified the milestones: 15-hipri, 15-lopri, 15.4.2 Jan 6, 2017

vinnymac mentioned this pull request Jan 10, 2017

Typing is garbled in IE11 Andarist/react-textarea-autosize#99

Closed

renovate bot mentioned this pull request Feb 2, 2018

Update dependency react to v0.14.9 - autoclosed signavio/backbone-rel#29

Closed

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Correctly render placeholder for textarea in IE11 #8020

Correctly render placeholder for textarea in IE11 #8020

aweary commented Oct 19, 2016 •

edited

sophiebits Oct 19, 2016

aweary Oct 19, 2016

sophiebits Oct 19, 2016

sophiebits Oct 19, 2016

aweary Oct 19, 2016 •

edited

aweary commented Oct 19, 2016

sophiebits left a comment

sophiebits Oct 30, 2016

aweary commented Nov 3, 2016

sophiebits commented Nov 3, 2016

aweary commented Nov 5, 2016

gaearon commented Jan 6, 2017

Correctly render placeholder for textarea in IE11 #8020

Correctly render placeholder for textarea in IE11 #8020

Conversation

aweary commented Oct 19, 2016 • edited

Test plan

sophiebits Oct 19, 2016

Choose a reason for hiding this comment

aweary Oct 19, 2016

Choose a reason for hiding this comment

sophiebits Oct 19, 2016

Choose a reason for hiding this comment

sophiebits Oct 19, 2016

Choose a reason for hiding this comment

aweary Oct 19, 2016 • edited

Choose a reason for hiding this comment

aweary commented Oct 19, 2016

sophiebits left a comment

Choose a reason for hiding this comment

sophiebits Oct 30, 2016

Choose a reason for hiding this comment

aweary commented Nov 3, 2016

sophiebits commented Nov 3, 2016

aweary commented Nov 5, 2016

gaearon commented Jan 6, 2017

aweary commented Oct 19, 2016 •

edited

aweary Oct 19, 2016 •

edited