title: Firefox Issue: Red border around Input text element on focus change
body: <h3>The goal is to render a form with multiple input fields. <br/></h3>
  
  <blockquote>
    <p>Expected result: All the input fields have consistent styling <br/>
    Actual result: <code>Email</code> field renders red border after entering data &amp; changing focus. <br/></p>
  </blockquote>
  
  <p>This only happens with Firefox and not with Chrome.</p>
  
  <p><img src="https://i.stack.imgur.com/UjtiL.png" alt="Screenshot from Firefox"></p>
  
  <p>I have tried adding a solution from stackoverflow but that didn't change anything, I am using Bootstrap for the most part.</p>
  
  <pre class="lang-css prettyprint-override"><code>.form-control:focus { box-shadow: none; }
  </code></pre>
  
  <p>Code from a the component is:</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;div className="col-6 cformrow"&gt;
   &lt;label className="float-left"&gt;Email*&lt;/label&gt;
    &lt;input 
     className="form-control px-4 py-2"
     type={"email"}
     name={"PrimaryEmail"}
     pattern="[A-Za-z ]+"
     value={this.state.PrimaryEmail}
     onChange={this.getDetails}
    /&gt;
  
   &lt;small className="form-text text-left text-danger p-absolute"&gt;  
    {this.state.PrimaryEmailerror}
   &lt;/small&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the function that is called :</p>
  
  <pre class="lang-js prettyprint-override"><code>getDetails = event =&gt; {
   if (event.target.name === "PrimaryEmail") {
    if (event.target.value.match(/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/)) {
     this.setState({ [event.target.name + "error"]: "" });
    } else {
     this.setState({ PrimaryEmailerror: "Please enter a valid email" });
    }
   }
  }
  </code></pre>