From 533b66a60d8d42e55c76365d73d6627fce100982 Mon Sep 17 00:00:00 2001
From: halvves <hi@halvves.com>
Date: Mon, 26 Aug 2019 21:49:36 -0700
Subject: [PATCH 1/3] 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
---
 .../components/fixtures/textareas/index.js    | 38 +++++++++++++++++++
 .../src/__tests__/ReactDOMTextarea-test.js    | 27 +++++++++++++
 .../react-dom/src/client/ReactDOMTextarea.js  |  4 +-
 3 files changed, 68 insertions(+), 1 deletion(-)

diff --git a/fixtures/dom/src/components/fixtures/textareas/index.js b/fixtures/dom/src/components/fixtures/textareas/index.js
index 54173cb323c22..dcb92262a12c0 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,43 @@ 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, 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 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(<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 b1bdcdd00f0b1..3eae09dbd04bb 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) {
+      node.value = textContent;
+    }
   }
 }
 

From 55563b9a4ba811cf45ef5b9f49d644c29e15380f Mon Sep 17 00:00:00 2001
From: halvves <hi@halvves.com>
Date: Mon, 9 Sep 2019 22:15:07 -0700
Subject: [PATCH 2/3] more explicit conditional check for textContent

re: @philipp-spiess code review
---
 packages/react-dom/src/client/ReactDOMTextarea.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-dom/src/client/ReactDOMTextarea.js b/packages/react-dom/src/client/ReactDOMTextarea.js
index 3eae09dbd04bb..b6873db6cba08 100644
--- a/packages/react-dom/src/client/ReactDOMTextarea.js
+++ b/packages/react-dom/src/client/ReactDOMTextarea.js
@@ -157,7 +157,7 @@ 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) {
-    if (textContent) {
+    if (textContent !== '' && textContent !== null) {
       node.value = textContent;
     }
   }

From ca530ef3b984f33f81cdf83cd1737bbcf316420c Mon Sep 17 00:00:00 2001
From: halvves <hi@halvves.com>
Date: Mon, 9 Sep 2019 22:33:58 -0700
Subject: [PATCH 3/3] clarify textarea test fixture's expected result

better describe the behavior we are testing for
re: @philipp-spiess code review
---
 fixtures/dom/src/components/fixtures/textareas/index.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/fixtures/dom/src/components/fixtures/textareas/index.js b/fixtures/dom/src/components/fixtures/textareas/index.js
index dcb92262a12c0..9c3f14f85de91 100644
--- a/fixtures/dom/src/components/fixtures/textareas/index.js
+++ b/fixtures/dom/src/components/fixtures/textareas/index.js
@@ -54,7 +54,8 @@ export default class TextAreaFixtures extends React.Component {
             <b>
               <i>not</i>
             </b>{' '}
-            see a red aura, indicating the textarea is invalid.
+            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}} />