Don't set empty placeholder to work around IE11 bug (#11177)
* Don't set empty placeholder to work around IE11 bug * Add fixture for textarea placeholders
Dan Abramov committed
Oct 10, 2017 at 17:49 UTC
309fa6c871362cfa8b2b94a7149585b5f599b73d
2 files changed
+45
-23
fixtures/dom/src/components/fixtures/textareas/index.js
+35
-22
@@ -1,34 +1,47 @@
1
+import FixtureSet from '../../FixtureSet';
2
+import TestCase from '../../TestCase';
3
+
4
const React = window.React;
5
3
-class TextAreaFixtures extends React.Component {
6
+export default class TextAreaFixtures extends React.Component {
7
state = {value: ''};
8
onChange = event => {
9
this.setState({value: event.target.value});
10
};
11
render() {
12
return (
10
- <div>
11
- <form className="container">
12
- <fieldset>
13
- <legend>Controlled</legend>
14
- <textarea value={this.state.value} onChange={this.onChange} />
15
- </fieldset>
16
-
17
- <fieldset>
18
- <legend>Uncontrolled</legend>
19
- <textarea defaultValue="" />
20
- </fieldset>
21
- </form>
22
-
23
- <div className="container">
24
- <h4>Controlled Output:</h4>
25
- <div className="output">
26
- {this.state.value}
13
+ <FixtureSet title="Textareas">
14
+ <TestCase
15
+ title="Kitchen Sink"
16
+ description="Verify that the controlled textarea displays its value under 'Controlled Output', and that both textareas can be typed in">
17
+ <div>
18
+ <form className="container">
19
+ <fieldset>
20
+ <legend>Controlled</legend>
21
+ <textarea value={this.state.value} onChange={this.onChange} />
22
+ </fieldset>
23
+ <fieldset>
24
+ <legend>Uncontrolled</legend>
25
+ <textarea defaultValue="" />
26
+ </fieldset>
27
+ </form>
28
+ <div className="container">
29
+ <h4>Controlled Output:</h4>
30
+ <div className="output">
31
+ {this.state.value}
32
+ </div>
33
+ </div>
34
</div>
28
- </div>
29
- </div>
35
+ </TestCase>
36
+ <TestCase title="Placeholders">
37
+ <TestCase.ExpectedResult>
38
+ The textarea should be rendered with the placeholder "Hello, world"
39
+ </TestCase.ExpectedResult>
40
+ <div style={{margin: '10px 0px'}}>
41
+ <textarea placeholder="Hello, world" />
42
+ </div>
43
+ </TestCase>
44
+ </FixtureSet>
45
);
46
}
47
}
33
-
34
-module.exports = TextAreaFixtures;
src/renderers/dom/fiber/ReactDOMFiberComponent.js
+10
-1
@@ -243,6 +243,7 @@ function trapClickOnNonInteractiveElement(node: HTMLElement) {
243
}
244
245
function setInitialDOMProperties(
246
+ tag: string,
247
domElement: Element,
248
rootContainerElement: Element | Document,
249
nextProps: Object,
@@ -270,7 +271,14 @@ function setInitialDOMProperties(
271
}
272
} else if (propKey === CHILDREN) {
273
if (typeof nextProp === 'string') {
273
- setTextContent(domElement, nextProp);
274
+ // Avoid setting initial textContent when the text is empty. In IE11 setting
275
+ // textContent on a <textarea> will cause the placeholder to not
276
+ // show within the <textarea> until it has been focused and blurred again.
277
+ // https://github.com/facebook/react/issues/6731#issuecomment-254874553
278
+ var canSetTextContent = tag !== 'textarea' || nextProp !== '';
279
+ if (canSetTextContent) {
280
+ setTextContent(domElement, nextProp);
281
+ }
282
} else if (typeof nextProp === 'number') {
283
setTextContent(domElement, '' + nextProp);
284
}
@@ -550,6 +558,7 @@ var ReactDOMFiberComponent = {
558
assertValidProps(tag, props, getCurrentFiberOwnerName);
559
560
setInitialDOMProperties(
561
+ tag,
562
domElement,
563
rootContainerElement,
564
props,