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

[arendjr]

Nikolai Mavrenkov already created a good description of the problem on Stack Overflow: http://stackoverflow.com/questions/36893449/textarea-placeholder-isnt-shown-in-ie-11-being-rendered-using-react

I just can confirm it breaks in IE11, but works in IE10 (and other browsers) with React v15.0.2.

[syranide]

Confirmed... and really weird. I'm trying to reproduce it outside of React and I can't. So I'm not really sure what could be causing this.

[jimfb]

Yet another bug which is automatically fixed by #6406

Demo without fix: https://jsfiddle.net/6tefu8g7/
Demo with fix: http://jsfiddle.net/m2ke4chf/

Can we PLEASE get that PR reviewed/merged. cc @facebook/react-core

[jimfb]

Fixed by #6406.

[AnderssonChristian]

@jimfb I have a similar issue where the textarea would treat the initial value as the placeholder text. Demo here (test in IE11). I'm I correct in guessing this is directly related to the issue above, or is this another issue?

[syranide]

@AnderssonChristian value={this.state.placeholderValue}

[AnderssonChristian]

@syranide pardon? :)

[syranide]

@AnderssonChristian Brain shortcircuit, I thought you were setting the value to the placerholder text. Yeah I believe the error you're seeing is related to the error mentioned here and fixed.

[toonvanacker]

I'm seeing this bug again in React 15.3.0 (and also in 15.3.1)

Here's a small fiddle displaying the issue: https://jsfiddle.net/94g0kbhp/2/
How it looks in Chrome on OS X:
How it looks in IE11 on Windows 10:
IE11 version: 11.0.10240.16384

[AnderssonChristian]

@toonvanacker it worked fine for me in IE11.0.9600.18097

[manpreetssethi]

I'm seeing this again as well, +1 @toonvanacker

[ivank]

Yup i think this issue needs to be reopened @jimfb as you can easily reproduce it on the IE11 windows 10. Maybe add a test for it or something? Its the only thing still keeping me on 0.14 ...

[aweary]

I was able to reproduce this using the latest release, https://jsfiddle.net/pfe7yq65/.

I'll reopen this since it's still an issue 👍

[aweary]

I was able to reproduce the issue outside of React, see https://jsfiddle.net/vovuant7/

var root = document.getElementById('root');
var textarea = document.createElement('textarea');
textarea.setAttribute('placeholder', 'Testing 1, 2, 3');
textarea.textContent = '';
root.appendChild(textarea)

The issue is that we are calling setTextContent on the node because the tree.text is '' when it should be null.

Setting textContent on a <textarea/> will overwrite the placeholder until it is focused/blurred, after which it will restore the placeholder text. This is not the case in other browsers I've tested.

I'll look into this more.