How to reset an uncontrolled form? (using Remix)

[rich crag]

I have been using remix extensively for a little while now and haven't been able to reset a bunch of Mantine's more advanced controls like NumberInput Select etc...

I might be missing something, but it could also just be an issue with the pattern I am using where Remix prefers uncontrolled forms - you only really have control over defaultValue unless you want to use refs everywhere which just gets messy and I want to avoid.

I thought about maybe using a key on the parent and whenever I need to reset the form I increment the value of that key to force the component to re-build which I think would use the defaultValue again...

Given that updating the defaultValue works on TextInput I am just checking whether something is missing in those other controls? Is this a bug, or is the fact it works on TextInput is just a happy side effect of a more simple form element?

Tried to setup a demo here but code sandbox seems to be struggling with Remix... https://codesandbox.io/p/sandbox/mantine-remix-form-reset-example-dl7cwl

My demo code sandbox isnt even loading now 😐 how annoying.

Anyway - you can test it out, just use uncontrolled components.
Set defaultValues then use a <Button type='reset'>Reset</Button> somewhere.

It happily resets text fields, but not the other field types.

[lethal kite]

Some custom complex inputs (like Select, MultiSelect, possibly other components to) do not support native reset events – their state is controlled entirely with JavaScript. If you want to use native browser validation and reset events, use NativeSelect and TextInput with type="number"

[rich crag]

Would this be something worth looking into adding via a PR or is the whole idea complex and not worth the effort?

[lethal kite]

It does not worth the effort. i do not even know wherther it is possible.

[rich crag]

Wouldn't it just be an event handler that would reload the defaultValue?

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset_event

ohh thats on the form, not the element

[rich crag]

@lethal kite - In case I am not thinking of a great solution, what would you suggest if I needed to reset a small form which needed to use some more advanced fields and I wanted to avoid making it controlled, and avoid using refs. I am thinking I can increment a key on a parent container so react thinks its a new bunch of children elements and draws them new... is that a good way to approach?

[lethal kite]

Just make it controlled instead of reinventing the wheel