title: Touching fields causes react-hook-form to become dirty
body: <p>I have a problem with react-hook-form whereby simply &quot;touching&quot; a field (clicking into it then clicking elsewhere) is causing the formState.isDirty to be true. I've reproduced the problem in this codesandbox:</p>
  <p><a href="https://codesandbox.io/s/react-hook-form-dirty-by-touch-p8x6j" rel="nofollow noreferrer">https://codesandbox.io/s/react-hook-form-dirty-by-touch-p8x6j</a></p>
  <p>I'm loading a record from the server and calling reset() so that it's regarded as the new baseline, and this is probably the cause of the problem. But, being a dynamic form, I need to retrieve the object form the server to load into the form, so I see no way around this. All I want is for the formState.isDirty to remain false as long as the values don't actually change.</p>
  <p>I don't have this problem with more complex components (such as react-select) for which I'm just calling register('whatever') myself, and it's only the native HTML inputs where I'm using ref={register} that are having this problem.</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  import &quot;./styles.css&quot;;
  import { useForm } from &quot;react-hook-form&quot;;
  import { yupResolver } from &quot;@hookform/resolvers/yup&quot;;
  import * as yup from &quot;yup&quot;;
  
  export default function App() {
    interface MyObject {
      testing: string;
      id: number;
    }
  
    const blankObject: MyObject = {
      testing: &quot;Default value&quot;,
      id: 0
    };
  
    const [obj, setObj] = useState(blankObject);
  
    const schema = yup.object().shape({
      testing: yup.string().max(40)
    });
  
    const { register, handleSubmit, formState, reset, errors } = useForm&lt;
      MyObject
    &gt;({
      resolver: yupResolver(schema),
      defaultValues: blankObject
    });
  
    useEffect(() =&gt; {
      setTimeout(() =&gt; {
        const newObj = {
          testing: &quot;Pretend this came from the server&quot;,
          id: 123
        };
        setObj(newObj);
        reset(newObj);
      }, 2000);
    }, [reset]);
  
    const onSubmit = (data: MyObject) =&gt; {
      alert(JSON.stringify(data));
    };
  
    const onReset = () =&gt; {
      reset();
    };
  
    return (
      &lt;form onSubmit={handleSubmit(onSubmit)}&gt;
        {obj.id === 0 ? (
          &lt;p&gt;Please wait...&lt;/p&gt;
        ) : (
          &lt;div&gt;
            &lt;p&gt;ID: {obj.id}&lt;/p&gt;
            &lt;label&gt;Enter text: &lt;/label&gt;
            &lt;input
              type=&quot;text&quot;
              name=&quot;testing&quot;
              ref={register}
              autoComplete=&quot;off&quot;
              style={{ width: &quot;50%&quot; }}
              defaultValue={obj.testing}
            /&gt;
            {errors.testing &amp;&amp; (
              &lt;div style={{ color: &quot;#ff0000&quot; }}&gt;{errors.testing?.message}&lt;/div&gt;
            )}
  
            &lt;pre&gt;{JSON.stringify(formState, null, 2)}&lt;/pre&gt;
  
            &lt;input type=&quot;submit&quot; /&gt;
            &lt;input type=&quot;button&quot; value=&quot;reset&quot; onClick={onReset} /&gt;
          &lt;/div&gt;
        )}
      &lt;/form&gt;
    );
  }
  </code></pre>
  <p>I could probably get rid of the ref={register} and handle the registration manually, but it seems a bit beside the point of react-hook-form to do so.</p>
  <p>Thanks.</p>