conform
conform copied to clipboard
[1.0.0] empty string defaultValue not applied via prop getters
Describe the bug and the expected behavior
I want to default a select input to a disabled option with a value of ""
(the empty string). I set useForm
's defaultValue
option, but it seems to have no effect? I can configure the select element manually by applying the defaultValue=""
prop, but I expected that to happen automatically (coming from getSelectProps
).
Note: I also tried a combination of approaches by applying defaultValue={fields.myField.initialValue}
or defaultValue={form.initialValue?.myField}
, but that didn't help as both are undefined
.
Conform version
v1.0.0
Steps to Reproduce the Bug or Issue
Full reproduction with native input comparison here:
https://stackblitz.com/edit/remix-run-remix-q8mz1z?file=app%2Froutes%2F_index.tsx
What browsers are you seeing the problem on?
Chrome, Firefox, Microsoft Edge, Safari, Others
Screenshots or Videos
No response
Additional context
This seems to only be a bug with regards to the empty string as a default value. Using non-empty values behaves as expected. But the empty string is a valid value, IMHO, and should behave as such.
What you found is a side effect of the normalization process within Conform. This includes serializing all the primitves, e.g. true
to "on"
or 1
to "1"
, and stripping empty string / empty array etc, which makes it much simpler to compare and find out what's changed.
I think this shouldn't be too much of a problem in general. Just something should have been documented to avoid surprise?
Ok, so it is intentional - interesting. In that case, the user-land solution would be applying defaultValue={fields.myField.initialValue ?? ''}
to every input that needs to support an empty string default value, I guess?
I would recommend defaultValue={fields.myField.initialValue ?? ''}
in general especially if you are creating a component / function that is reused with different forms as not every form will have a default value anyway.
It is not intentional but more a side effect I didn't aware 😅. I might be able to "fix" it by delaying when the normalization happens but there could be other trade-offs doing this as well.
OK, thanks for clarifying.
@edmundhung I also ran into this today, when updating id
in useForm
to "reset" the form initialValue
does not update with the new value. e.g. field.key.value
is updated but field.key.initialValue
is still the stale value.
@lifeiscontent Are you sure you have passed the new initialValue
to useForm()
when changing an id? It's likely that Conform is using the old value because the initialValue
is not updated yet at that time.
If this doesn't fix your issue, please open a new issue with a repo 🙏🏼
We also encountered this issue.
It forces us to use optional
(on Valibot) for all fields that can be left empty. I suppose it's caused by the same side-effect as this.
@depsimon This was referring to the defaultValue
of the form and have no impact on the validation. Can you share a repo or stackblitz with the issue you had?
Definitely, I've created a dedicated issue.