RangeError when using reset as clickHandler

Describe the bug When using the reset function as the onClick handler on a button, I get an Uncaught RangeError in the console:

index.esm.js:610 Uncaught RangeError: Maximum call stack size exceeded at cloneObject (index.esm.js:610) at cloneObject (index.esm.js:621) at cloneObject (index.esm.js:621) at cloneObject (index.esm.js:621) at cloneObject (index.esm.js:621) at cloneObject (index.esm.js:621) at cloneObject (index.esm.js:621) at cloneObject (index.esm.js:621) at cloneObject (index.esm.js:621) at cloneObject (index.esm.js:621)

The form is still reset successfully, but I receive this error. This error only happens when sending the reset function as the onClick handler, like in the documentation https://react-hook-form.com/api#reset

If I change it to onClick={() => reset()} it does not give an error. If I use an input type=‘reset’ without the onClick handler, I also do not get this error.

I have not tested this in earlier versions of react, only on the current 17.0.1

To Reproduce Steps to reproduce the behavior:

1. Type anything into the field
2. With your console open, click the Reset button.

Codesandbox link (Required) The Codesandbox template linked gives a bunch of errors, and cannot be used, so here is the most basic code example to use:

import React from 'react'
import { useForm } from 'react-hook-form'

const SearchForm = (props) => {
  const { register, handleSubmit, reset } = useForm()
  
  const onSubmit = (data) => console.log(data)

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type='text' name='username' ref={register} />

      <input type='submit' value='Search' />
      <input type='button' onClick={reset} value='Reset' />
    </form>
  )
}

export default SearchForm

Expected behavior Clear the form without errors in the console.

Screenshots No screenshot applicable.

Desktop (please complete the following information):

• OS: macOS 10.15.7
• Browser: Chrome
• Version: 86

Additional context When debugging this, it appears the cloneObject() function is being sent the SyntheticBaseEvent from React when reset is used as the onClick handler. Since the documentation uses reset in this way, I’m assuming this is a bug, rather than planned functionality.

(hey, as an aside, react-hook-form is amazing, and I can’t thank you all enough for making it!)

[bluebill1049]

Hello @bluebill1049 !

First of all, thank you so much for your hard effort, really appreciate it!! 🔥

I reproduced the error with the following CSB: https://codesandbox.io/s/wonderful-elgamal-5ruxr

I do not know if It could be of any help now but I encountered the same problem and here It is.

<button type="button" onClick={() => reset()}>
    reset
</button>

make sure you don’t pass event as argument. I will patch this issue with shallow clone to avoid this problem as well.

https://github.com/react-hook-form/react-hook-form/pull/3607

[bluebill1049]

could you see the template is required to have a CSB?