From a5df18a9e5d7cc70c30ce144dcc291e9f64cb451 Mon Sep 17 00:00:00 2001
From: halvves <halvves@users.noreply.github.com>
Date: Wed, 18 Sep 2019 14:38:02 -0700
Subject: [PATCH] prevent firefox marking required textareas invalid (#16578)

* prevent firefox marking required textareas invalid

Bug was caused by an IE10/IE11 bugfix dealing with the placeholder attribute and textContent. Solved by avoiding the IE bugfix when textContent was empty.

Closes #16402

* more explicit conditional check for textContent

re: @philipp-spiess code review

* clarify textarea test fixture's expected result

better describe the behavior we are testing for
re: @philipp-spiess code review
---
 .../components/fixtures/textareas/index.js    | 39 +++++++++++++++++++
 .../src/__tests__/ReactDOMTextarea-test.js    | 27 +++++++++++++
 .../react-dom/src/client/ReactDOMTextarea.js  |  4 +-
 3 files changed, 69 insertions(+), 1 deletion(-)

diff --git a/fixtures/dom/src/components/fixtures/textareas/index.js b/fixtures/dom/src/components/fixtures/textareas/index.js
index 54173cb323c2..9c3f14f85de9 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 {
             <textarea placeholder="Hello, world" />
           </div>
         </TestCase>
+
+        <TestCase
+          title="Required Textareas"
+          affectedBrowsers="Firefox"
+          relatedIssues="16402">
+          <TestCase.Steps>
+            <li>View this test in Firefox</li>
+          </TestCase.Steps>
+
+          <TestCase.ExpectedResult>
+            You should{' '}
+            <b>
+              <i>not</i>
+            </b>{' '}
+            see a red aura on initial page load, indicating the textarea is
+            invalid.
+            <br />
+            This aura looks roughly like:
+            <textarea style={{boxShadow: '0 0 1px 1px red', marginLeft: 8}} />
+          </TestCase.ExpectedResult>
+
+          <Fixture>
+            <form className="control-box">
+              <fieldset>
+                <legend>Empty value prop string</legend>
+                <textarea value="" required={true} />
+              </fieldset>
+              <fieldset>
+                <legend>No value prop</legend>
+                <textarea required={true} />
+              </fieldset>
+              <fieldset>
+                <legend>Empty defaultValue prop string</legend>
+                <textarea required={true} defaultValue="" />
+              </fieldset>
+            </form>
+          </Fixture>
+        </TestCase>
       </FixtureSet>
     );
   }
diff --git a/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js b/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js
index 2dc47a6df1a4..e385fd5a1316 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(<textarea value="" readOnly={true} />, container);
+
+    expect(counter).toEqual(0);
+  });
+
   it('should render defaultValue for SSR', () => {
     const markup = ReactDOMServer.renderToString(<textarea defaultValue="1" />);
     const div = document.createElement('div');
diff --git a/packages/react-dom/src/client/ReactDOMTextarea.js b/packages/react-dom/src/client/ReactDOMTextarea.js
index b1bdcdd00f0b..b6873db6cba0 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;
+    }
   }
 }