[fetch] Allow create options from initial value

[mskocik]

Can be desirable to init svelecte with initial value when we have fetch in init mode defined.

Typical use-case would be dependent svelecte and previous search with stored value.

[update 2022-01-25]
Should work only conjunction with valueAsObject property
Of course it should work also with init fetch mode, in which case, value setter will be delayed

[rottmann]

When in init mode, svelecte loads the optionlist, after that, the item with the key should be selected.

Currently we must set key and value to show a pre-selected item. But normally you store the setting (a key) and not the value.

Example:

Load a user from database and got his country-iso-code "DE".
Svelecte loads a countrylist in init mode and it should set the item to the selected user country.

// load user
// user.country = 'DE'

// Here we don't have the value 'Germany' (loaded async by Svelecte)
let value = [
  { key: user.country, value: '' }
]

// ...

<Svelecte
  valueField="key"
  labelField="value"
  fetch="/countries.json"
  fetchMode="init"
  valueAsObject
  bind:value={ value}
></Svelecte>

Svelecte should set the selected option only by key after init (or by key from object if use valueAsObject).

At the moment it works only with multiple, but not as single select.

Without valueAsObject and only let value = 'DE' we see undefined.

[mskocik]

Yes, this use case is totally valid.

I didn't know back then how to solve it properly. But as I thought about it today, it turns out, that solution can be pretty easy, soon will publish new version with the update.

[rottmann]

Thank you.

Have 2 smaller suggestions:

When fetchMode is init and the data is loading, the component should be disabled until the data is available. (not so important, this could be done on app level too).

When set it manually to disabled and fech is still loading the loading spinner is invisible.

[mskocik]

When set it manually to disabled and fech is still loading the loading spinner is invisible.

Spinner is visible even when disabled.

BUT when disabled is set to true and there is fetch request running, it's cancelled. This is intentional for use cases when you have parent svelecte controlling it's disabled and fetch props.

Not sure if I will be able to achieve both funcionalities at the same time

---

I do it that when parent value changes, child svelecte is enabled and fetching and when options are received (listenting to fetch event), child gets focused

[rottmann]

Here is a small example: https://svelte.dev/repl/4facb61cc3ed47bba72c80a5256f230d?version=3.46.2

It disables by default and simulates a 3 second fetch. After fetch it will be enabled. No spinner is visible while fetching, but fetch is running.

Ok, when you handle it as abort it is clear that no spinner is visible.

The abort und disabled functionality should better be separated. abort could stop execution and set component to disabled.
disabled should work like in html components, it disables only the input.