CODEWITHSUNDEEP
web-componentlit
badm
badm

Reputation: 249

How to reset form with web components?

For our web-components library we are using Lit framework, but recently we have discovered the bug that whenever our custom web components are included into the form, they are getting ignored by form reset(). Do you know how to force custom web components to be included into form.reset()?

<form>
   <custom-input-field
     id="title"
     name="title"
     value="Check out our library"
   ></custom-input-field>

   <input type="reset">
</form>

Upvotes: 3

Views: 1104

Answers (1)

Augustine Kim
Augustine Kim

Reputation: 1186

You might want to take a look at form-associated custom elements.

This'll allow custom elements to participate in forms and let you implement a formResetCallback() to reset your custom element to its default state on form reset.

As of writing (Aug 2022), form-associated custom elements via ElementInternals are available for Chrome and Firefox, and just got implemented for Safari.

Upvotes: 3

Related Questions