Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[1.0.0] empty string defaultValue not applied via prop getters #424

Open
halljus opened this issue Feb 5, 2024 · 9 comments
Open

[1.0.0] empty string defaultValue not applied via prop getters #424

halljus opened this issue Feb 5, 2024 · 9 comments

Comments

@halljus
Copy link

halljus commented Feb 5, 2024

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 halljus changed the title [v1] useForm defaultValue not applied via prop getters [v1] empty string defaultValue not applied via prop getters Feb 5, 2024
@edmundhung
Copy link
Owner

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?

@halljus
Copy link
Author

halljus commented Feb 5, 2024

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?

@edmundhung
Copy link
Owner

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.

@halljus
Copy link
Author

halljus commented Feb 5, 2024

OK, thanks for clarifying.

@halljus halljus changed the title [v1] empty string defaultValue not applied via prop getters [1.0.0] empty string defaultValue not applied via prop getters Feb 6, 2024
@lifeiscontent
Copy link
Contributor

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

@edmundhung
Copy link
Owner

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

@depsimon
Copy link
Contributor

depsimon commented May 6, 2024

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.

@edmundhung
Copy link
Owner

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

@depsimon
Copy link
Contributor

depsimon commented May 7, 2024

Definitely, I've created a dedicated issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants