title: React-Hook-Form working on PC, but on mobile inputs go blank when switching fields
body: <p>I used React-Hook-Form and Yup for validation to make an Amazon Create Account Clone. Everything works fine on my PC, but when I try to use the form on a mobile browser (both Chrome and Safari) the input fields text seems to vanish when I click to type into a new input field. When I go back to the &quot;vanished&quot; field, the text I previously typed reappears, but once I click a new field, disappears again. I need the mobile version to work like the PC version. The app was created with create-react-app and is deployed using Firestore.
  <a href="https://login-clone.web.app/" rel="nofollow noreferrer">https://login-clone.web.app/</a></p>
  <p>Signup.js</p>
  <pre><code>import React from 'react';
  import '../App.css';
  import hr from '../assets/hr.png';
  import iFont from '../assets/iFont.png';
  import { useForm } from &quot;react-hook-form&quot;;
  import { yupResolver } from '@hookform/resolvers/yup';
  import * as yup from 'yup';
  
  const SignupSchema = yup.object().shape({
      userName: yup
          .string()
          .required(&quot;Enter your name&quot;),
      email: yup
          .string()
          .email(&quot;Enter a valid email address&quot;)
          .max(1064)
          .required(&quot;Enter your email&quot;),
      password: yup
          .string()
          .min(6, &quot;Passwords must be at least 6 characters&quot;)
          .required(&quot;Enter your password&quot;),
      rePassword: yup
          .string()
          .required('Type your password again')
          .oneOf([yup.ref('password')], 'Passwords must match')
  });
  
  
  const Signup = () =&gt; {
      const { register, handleSubmit, errors } = useForm({
          resolver: yupResolver(SignupSchema)
      });
      const onSubmit = data =&gt; {
          console.log(JSON.stringify(data));
      };
  
      return (
          &lt;form onSubmit={handleSubmit(onSubmit)}&gt;
              &lt;div className='form-container'&gt;
  
                  &lt;h1&gt; Create account &lt;/h1&gt;
  
                  &lt;label&gt; Your name &lt;/label&gt;
                  &lt;input
                      className={errors.userName &amp;&amp; 'alertInput'}
                      name=&quot;userName&quot;
                      type=&quot;text&quot;
                      autoComplete=&quot;on&quot;
                      ref={register}
                  /&gt;
                  {errors.userName &amp;&amp; &lt;div className=&quot;alertText&quot;&gt; {errors.userName.message} &lt;/div&gt;}
  
                  &lt;label&gt; Email &lt;/label&gt;
                  &lt;input
                      className={errors.email &amp;&amp; 'alertInput'}
                      name=&quot;email&quot;
                      type=&quot;text&quot;
                      autoComplete=&quot;on&quot;
                      ref={register} /&gt;
                  {errors.email &amp;&amp; &lt;div className=&quot;alertText&quot;&gt; {errors.email.message} &lt;/div&gt;}
  
                  &lt;label&gt; Password &lt;/label&gt;
                  &lt;input
                      className={errors.password ? 'alertInput' : 'passwordColor'}
                      name=&quot;password&quot;
                      type=&quot;text&quot;
                      autoComplete=&quot;off&quot;
                      placeholder=&quot;At least 6 characters&quot;
                      ref={register} /&gt;
                  {errors.password &amp;&amp; &lt;div className=&quot;alertText&quot;&gt; {errors.password.message} &lt;/div&gt;}
  
                  &lt;p className={errors.password ? 'displayNone' : 'passwordColor'}&gt;
                      &lt;img src={iFont} className=&quot;iFont&quot; alt=&quot;info icon&quot; /&gt;
                   Passwords must be at least 6 characters. &lt;/p&gt;
  
  
                  &lt;label&gt; Re-enter password &lt;/label&gt;
                  &lt;input
                      className={errors.rePassword &amp;&amp; 'alertInput'}
                      name=&quot;rePassword&quot;
                      autoComplete=&quot;off&quot;
                      ref={register} /&gt;
                  {errors.rePassword &amp;&amp; &lt;div className=&quot;alertText&quot;&gt; {errors.rePassword.message} &lt;/div&gt;}
  
  
                  &lt;button type='submit'&gt; Create your Amazon account &lt;/button&gt;
  
                  &lt;p&gt; By creating an account, you agree to Amazon's &lt;/p&gt;
  
                  &lt;p&gt; &lt;span className=&quot;sm-font&quot;&gt;Conditions&lt;/span&gt; of Use and &lt;span className='sm-font'&gt; Privacy Notice. &lt;/span&gt;&lt;/p&gt;
  
                  &lt;img src={hr} className=&quot;hr1&quot; alt=&quot;horizontal line&quot; /&gt;
  
                  &lt;p&gt; Already have an account?  &lt;span&gt;Sign-in ▸&lt;/span&gt; &lt;/p&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      )
  }
  export default Signup;
  </code></pre>