Conform v1 useInputControl doesn't populate defaultValues correctly

[willhoney7]

Describe the bug and the expected behavior

If you set a defaultValue in the useForm hook (like for existing server data) and the field is handled by a useInputControl hook instead of a normal input (like say if you have a custom select you want to use), the default value for the field is not sent up in the payload, but it is still returned in the useInputControl hook. Check out the codesandbox to best see the issue.

Thanks!

Conform version

v1.0.0

Steps to Reproduce the Bug or Issue

1. Go to codesandbox: https://codesandbox.io/p/devbox/loving-elgamal-qt7whx?workspaceId=619a0863-8060-480c-8a4c-13e3599255da
2. Go to todo list example
3. Notice that current value of the task is c
4. Click save, notice that the submission errors out
5. Looking at console logs, you can see that the val is not included in the payload.

What browsers are you seeing the problem on?

Chrome

Screenshots or Videos

No response

Additional context

No response

[bkspace]

I assume the useInputControl exists just as a helper to handle controlled form inputs, but in the example there are no inputs. I believe you just need a hidden form input here for each task, such that when conform reads the formData, the value(s) exists in the payload.

[edmundhung]

It's a miss on my side. Right now it's only creating a hidden input for you on the first time control.change(value) is called. So you won't have defaultValue set on the formData if you never touch the input. I will push up a fix over the weekend.

For now, you can render an hidden input manually and useInputControl will pick it up instead of inserting another one.

[edmundhung]

This should be resolved in v1.0.1.

[anton-g]

I have an issue that might be related. I use Remix with the EpicStack which comes with checkbox component utilizing useInputControl (https://github.com/epicweb-dev/epic-stack/blob/90f4208395ab77605082a578e0e7e2cb0c2b66bc/app/components/forms.tsx#L108).

I use <CheckboxField/> together with getCollectionProps to render a list of checkboxes where you can select one or many.

If I set the default value in useForm so that one of the checkboxes is default checked and:

a) publish the form immediately -> the form is submitted with the correct default value b) check another checkbox and publish the form -> the form is submitted without the default value and only the manually selected value.

I'll try to recreate it in a sandbox as soon as I get some time! Let me know if you want it in a separate issue.

[anton-g]

Here's a reproduction of the issue I talk about above.

https://github.com/edmundhung/conform/assets/6201720/ab1608f0-f88e-4ab3-8429-4389a2ff29e7

Repo: https://github.com/anton-g/conform-default-value-issue Sandbox: https://codesandbox.io/p/github/anton-g/conform-default-value-issue/draft/wild-sound (note that you initially get some hydration errors because codesandbox injects devtools, but it works the same way locally without errors)

[edmundhung]

Hi @anton-g, sorry for the late reply. I have been reviewing several issues related to useInputControl and comes to a conclusion that the ability to insert an input for you isn't reliable in some scenario. I would suggest you to try rendering a hidden input on the CheckboxField manually. If there are still issues, the soon released useControl hook should help.