Priority of initial values (of the same input) in a form about formkit HOT 6 CLOSED

Sorry, I forgot to shorten the URL. I updated the initial post

from formkit.

@MattFromGer I'm just seeing the default playground example (just a text input) from the link you FormKit playground link you provided.

from formkit.

This seems counter intuitive at first — but it is working as intended. Actually in Vue Formulate (FormKit’s predecessor) we had it work the way you described and it was a huge issue for users. Most developers use the value prop to set the initial state of a given input when no value is used. For example, you might use United States on a registration form as the default value of a country selector if your audience was mostly US based.

However, when a form is repopulated, for example to edit the account details of the same form you want the top-down data to "win" vs the "local" value. This issue is accentuated when you want to encapsulate your form inputs (say into an "Address" component) and reuse it in multiple places, yes you want to have a sensible default on some inputs, but you also don’t want to prop-drill to reach the value prop on those sub-components.

If you have further questions about this we’d be happy to answer.

from formkit.

Thank you for your answer. It probably makes sense to leave it as it is if most devs are confused otherwise.

Funny thing is, that my use case is indeed the address. I have a delivery address and a billing address. I just pass the data of the backend in the form, check if they're equal and hide one address behind a checkbox. If the user clicks this checkbox to indicate the addresses are deviating, then in my case the new address inputs are populated with the same values. But I wanted to have blank values.

So my workaround right now is, to compare the addresses before passing it to the form. If they are equal, I remove one of the addresses out of the object and only then pass it to the form. Maybe not as straightforward, but a solution I can live with :)

from formkit.

Perhaps you could group your billing/non-billing addresses by wrapping them in a <FormKit type="group" name="shipping_address"> and <FormKit type="group" name="billing_address"> — or for one of them prefix the names of the inputs.

from formkit.

Hm I don't quite understand.. Here's another playground link that makes it more clear I hope.

Edit: Maybe the solution to strip it from the form value instead of handling it at the specific input group is the best solution after all.

from formkit.