Add test fixture for initial input validation bug in Firefox

facebook · Dec 4, 2017 · 4e94614 · 4e94614
1 parent 8ce5367
commit 4e94614
Showing 1 changed file with 40 additions and 0 deletions.
diff --git a/fixtures/dom/src/components/fixtures/text-inputs/index.js b/fixtures/dom/src/components/fixtures/text-inputs/index.js
@@ -42,6 +42,46 @@ class TextInputFixtures extends React.Component {
           </p>
         </TestCase>
 
+        <TestCase
+          title="Required Inputs"
+          affectedBrowsers="Firefox"
+          relatedIssues="8395">
+          <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 input is invalid.
+            <br />
+            This aura looks roughly like:
+            <input style={{boxShadow: '0 0 1px 1px red', marginLeft: 8}} />
+          </TestCase.ExpectedResult>
+
+          <Fixture>
+            <form className="control-box">
+              <fieldset>
+                <legend>Text</legend>
+                <input required={true} />
+              </fieldset>
+              <fieldset>
+                <legend>Date</legend>
+                <input type="date" required={true} />
+              </fieldset>
+            </form>
+          </Fixture>
+
+          <p className="footnote">
+            Checking the date type is also important because of a prior fix for
+            iOS Safari that involved assigning over value/defaultValue
+            properties of the input to prevent a display bug. This also
+            triggered input validation.
+          </p>
+        </TestCase>
+
         <TestCase title="Cursor when editing email inputs">
           <TestCase.Steps>
             <li>Type "user@example.com"</li>