What's the problem with the button name="reset"?

[Vlad991]

Hi! Please explain why reset() does not work if I give the button the name="reset". If you change the name to "reset1" everything works. Here's a sandbox: https://codesandbox.io/s/xenodochial-kapitsa-n6m5pj

[leapful]

@Vlad991 :

According to HTML specification, accessing form elements will follow this behavior:

You can access the list of the form's data-containing elements by examining the form's elements property. This returns an HTMLFormControlsCollection listing all of the form's user data entry elements, both those which are descendants of the form and those which are made members of the form using their form attributes.

You can also get the form's element by using its name attribute as a key of the form, but using elements is a better approach—it contains only the form's elements, and it cannot be mixed with other attributes of the form.

While "react-hook-form" is using "field.closest('form').reset()" to clear all values in the form, in your example, it's matched with name attribute "reset" as a key of HTML form element therefore its method "reset" is overridden and return button element.

Referrer: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement#accessing_the_forms_elements

[bluebill1049]

thanks @leapful 🙏

[JamesWong1999]

I saw on V8 RFC: #7433

remove internal reset API invoke

[ritikbanger]

Issues with Naming Elements

Some names will interfere with JavaScript access to the form's properties and elements.

For example:

<input name="id"> will take precedence over <form id="…">. This means that form.id will not refer to the form's id, but to the element whose name is "id". This will be the case with any other form properties, such as <input name="action"> or <input name="post">.
<input name="elements"> will render the form's elements collection inaccessible. The reference form.elements will now refer to the individual element.
To avoid such problems with element names:

• Always use the elements collection to avoid ambiguity between an element name and a form property.
• Never use "elements" as an element name.
• If you are not using JavaScript, this will not cause a problem.

[Vlad991]

Thanks! Your answer helped me a lot too!

[bluebill1049]

thanks @ritikbanger 🙏