diff --git a/fixtures/dom/src/components/fixtures/textareas/index.js b/fixtures/dom/src/components/fixtures/textareas/index.js
index 54173cb323c22..9c3f14f85de91 100644
--- a/fixtures/dom/src/components/fixtures/textareas/index.js
+++ b/fixtures/dom/src/components/fixtures/textareas/index.js
@@ -1,3 +1,4 @@
+import Fixture from '../../Fixture';
import FixtureSet from '../../FixtureSet';
import TestCase from '../../TestCase';
@@ -39,6 +40,44 @@ export default class TextAreaFixtures extends React.Component {
+
+
+
+ View this test in Firefox
+
+
+
+ You should{' '}
+
+ not
+ {' '}
+ see a red aura on initial page load, indicating the textarea is
+ invalid.
+
+ This aura looks roughly like:
+
+
+
+
+
+
+
);
}
diff --git a/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js b/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js
index 2dc47a6df1a44..e385fd5a1316f 100644
--- a/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js
@@ -126,6 +126,33 @@ describe('ReactDOMTextarea', () => {
expect(node.value).toEqual('gorilla');
});
+ it('will not initially assign an empty value (covers case where firefox throws a validation error when required attribute is set)', () => {
+ const container = document.createElement('div');
+
+ let counter = 0;
+ const originalCreateElement = document.createElement;
+ spyOnDevAndProd(document, 'createElement').and.callFake(function(type) {
+ const el = originalCreateElement.apply(this, arguments);
+ let value = '';
+ if (type === 'textarea') {
+ Object.defineProperty(el, 'value', {
+ get: function() {
+ return value;
+ },
+ set: function(val) {
+ value = '' + val;
+ counter++;
+ },
+ });
+ }
+ return el;
+ });
+
+ ReactDOM.render(, container);
+
+ expect(counter).toEqual(0);
+ });
+
it('should render defaultValue for SSR', () => {
const markup = ReactDOMServer.renderToString();
const div = document.createElement('div');
diff --git a/packages/react-dom/src/client/ReactDOMTextarea.js b/packages/react-dom/src/client/ReactDOMTextarea.js
index b1bdcdd00f0b1..b6873db6cba08 100644
--- a/packages/react-dom/src/client/ReactDOMTextarea.js
+++ b/packages/react-dom/src/client/ReactDOMTextarea.js
@@ -157,7 +157,9 @@ export function postMountWrapper(element: Element, props: Object) {
// will populate textContent as well.
// https://developer.microsoft.com/microsoft-edge/platform/issues/101525/
if (textContent === node._wrapperState.initialValue) {
- node.value = textContent;
+ if (textContent !== '' && textContent !== null) {
+ node.value = textContent;
+ }
}
}