<select>'s initial default value is not synced with form store about svelte-forms-lib HOT 11 CLOSED

Will look into it @damooo! Thanks for the issue.

from svelte-forms-lib.

For now a solution would be to initialize the default value in the initialValues object

const DEFAULT_OPTION = 'Mr.';

const {...handlers, etc} = createForm({
  initialValues: {
    title: DEFAULT_OPTION // initialise your select component with the default option
  },
  // other props
});

from svelte-forms-lib.

Does this make sense @damooo?

from svelte-forms-lib.

@tjinauyeung Thanks.
But, when we are initializing the form, there is no data. all options are dynamic, will be known only at run time. So default option is not known.

from svelte-forms-lib.

I see what you mean now.

Currently, the select will only update when the handleChange is called or if the form state is changed directly. The latter is done as follows:

createForm returns a form variable. This is an observable representing the form values. You can manipulate this variable and update the form state when the options are fetched:

const { form } = createForm({
  initialValues: {
    title: ""
  },
  onSubmit: (values) => alert(values)
});

getDynamicTitles().then(titles => {
  $form.title = titles[0] // set the title
});

Let me know if this works!

from svelte-forms-lib.

@tjinauyeung
That still has a problem that, it triggers svelte reactivity over $form, without user's explicit action. In some cases it is unwanted.

from svelte-forms-lib.

And what about initialising the form áfter the dynamic data has been fetched? Is that an option?

I'm open to other suggestions btw, just need to have a bit of a think on this.

from svelte-forms-lib.

In such cases, form binding is not a store, until it is initialized, and we cannot refer to it using $form anywhere, even after it is initialized. as svelte checks at compile time and raises error.

One solution i can think of is to make createForm accept an optional parameter formStore:Writable. If it is passed, it will be used and returned as form, otherwise new one. This way, even before initialization, store does exists, with what ever value, and we can refer to it in svelte component with '$form` syntax,

from svelte-forms-lib.

hello @tjinauyeung ,
Are you able to get to a way for it? It is very normal case to feed dynamic options to select.
Or is it possible to work around this without side effects?
thanks again for your work.

from svelte-forms-lib.

@damooo does #24 help with dynamically loaded options?

e.g.

1. render form, select's default value is null / undefined
2. request data
3. on response, set select's default value using updateInitialValues

from svelte-forms-lib.

Yup, that's pretty good api. thanks for that.

from svelte-forms-lib.