conform icon indicating copy to clipboard operation
conform copied to clipboard

[1.0.0] empty string defaultValue not applied via prop getters

Open halljus opened this issue 1 year ago • 11 comments

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.

halljus avatar Feb 05 '24 18:02 halljus

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?

edmundhung avatar Feb 05 '24 21:02 edmundhung

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?

halljus avatar Feb 05 '24 21:02 halljus

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.

edmundhung avatar Feb 05 '24 22:02 edmundhung

OK, thanks for clarifying.

halljus avatar Feb 05 '24 22:02 halljus

@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 avatar Mar 20 '24 22:03 lifeiscontent

@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 🙏🏼

edmundhung avatar Mar 21 '24 21:03 edmundhung

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 avatar May 06 '24 13:05 depsimon

@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?

edmundhung avatar May 06 '24 20:05 edmundhung

Definitely, I've created a dedicated issue.

depsimon avatar May 07 '24 08:05 depsimon