modular-forms icon indicating copy to clipboard operation
modular-forms copied to clipboard

SolidJS: Form reset action doesn't preventDefault like submit does.

Open sid1029 opened this issue 11 months ago • 1 comments

I have an example here : https://stackblitz.com/edit/solidjs-templates-7pgd2x?file=src%2FApp.tsx

To observe the issue click reset.

What happens : form values disappear. Expected behavior: Clicking reset should reset the form to its initialValues.

I was stuck on this for a while. The onReset action on a form doesn't seem to preventDefault() its event the way the submit handler does for you.

This causes the native browser behavior to override the behavior of the reset() function provided by modular-forms.

I would expect to just be able to call reset(formState) in the reset handler on a <Form> element and have the fields go back to their initialValues. But if I don't explicitly event.preventDefault() first, the browser resets the fields to blank values in the UI. The underlying formState model maintained by modular-forms correctly reflects the initialValues after reset().

Maybe my expectation is wrong but if I'm using the <Form> element generated by modular-forms instead of the native HTML <form> element I would expect things are really handled end-to-end by the library for me.

PS: This is a great library ! I'm using this with solid-bootstrap.

sid1029 avatar Feb 25 '24 21:02 sid1029

Thank you very much! That is a good point. Unfortunately, I have less time for Modular Forms at the moment, but this is something I will consider for the future of the library.

fabian-hiller avatar Feb 26 '24 17:02 fabian-hiller