How to use readSelection?

[galaczi]

Briefly, I am trying to wrap Svelecte into a reusable component with Superforms validation. I am doing remote data fetch. The data is in the following format:

{id: number, label: string}

SuperForms:

  const { value, errors } = formFieldProxy(
    superform, 
    field
  );

Svelecte:

  <Svelecte
    {...restProps}
    name={field}
    bind:value={$value}
    bind:readSelection
    valueField="id"
    labelField="label"
    valueAsObject={false}
    strictMode={false}
    options={[]}
    {clearable}
    {multiple}
  >

I am confused about readSelection. Should I listen to changes in $value (coming from superforms on e.g. failed form validation), and set the $value again manually from readSelection? Note that on failed validation only id is returned, that's why I think (guess?) I should use readSelection.

[mskocik]

By default, svelecte (single select) expect value to be scalar value like id etc. It also emits this simple value in onChange callback. Reason behind this that it copy behavior of native <select> which it replaces.
Whenever you need selected object without the need to specify bind:value={object}, you can use readSelection property. It's read-only, which means it transforms value to object.

Your use case: I am not sure... When superforms changes $value, svelecte should update the selected item. Is it not happening? But yo answer your question, you don't use readSelection to set $value again, because readSelection is object representation of $value (if any)

[galaczi]

I have created a small reproduction: https://github.com/galaczi/svelecte-superforms

Search for "item" in the Svelecte input. Leave the "missing" input empty so the validation fails. Upon submission I see the input value changed to the id, e.g. "1", instead of getting the object (with label) from the readSelection, which correctly has the values.

[mskocik]

I can see clearly now.

Your problem is that you have defined id as string in schema. When you return id as string instead of number, it works correctly:

---

But there is a slightly different problem (slightly offtopic):

There is problem with superforms schema definition. You have id defined as string which tries to set initial value as '', which svelecte converts to null. Problem is visible, when you define superForm like this:

  const pageForm = superForm(data.form, {
    clearOnSubmit: 'none',
    resetForm: false
  })

After successfull submit, the form will look like this:

Because in background this happens:

• form is submitted
• form is reset
  • Svelecte value is set to ''
  • That's value is invalid, value is cleared
• values are restored (?)
  • Value is set to '3', but Svelecte has no options defined (it's in fetch mode) and because Svelecte's strictMode={false}, "3" is new selected item - I am not sure that this is not a bug 🤔

I am not sure I can do anything on Svelecte's side, because superform resets the value before it re-sets it again.

[galaczi]

Interesting, thanks for pointing out the type mismatch!

For the case you mention with resetForm: false, after submitting it looks like readSelection still has the object values so it may be a bug indeed.

[mskocik]

Actually the bug is in that readSelection is not updated when value is changed externally 😄

[mskocik]

Starting a new thread which fixes all your problems.

Fix schema in +page.server.js

const schema = z.object({
  id: z.number().nullable().transform((value, ctx) => {
      if (value === null) {
        ctx.addIssue({
          code: z.ZodIssueCode.custom,
          fatal: true,
          message: 'ID is required'
        });
      }
      return value;
  }),
  missing: z.string().nonempty('Missing is required') // so validation fails
});

Now when validation fails on server, item is kept in Svelecte properly.

⚠️ If you plan to use superForm with resetForm: false you need this additional code to bypass superform's setting value to null and to correct value again:

<script> section:

let cached_selection_val;

function cache_selection() {
  // we are interested only in last SELECTED value
  if (readSelection) {
    cached_selection_val = readSelection;
  }
}

function reconstruct_cached_selection({
  inputValue,
  valueField
}) {
  if (cached_selection_val && cached_selection_val[valueField] == inputValue) {
    return cached_selection_val;
  }
  return null;
}

<html> part

<Svelecte
  fetch='/api?label=[query]'
  name="id"
  bind:readSelection
  bind:value={$values}
  multiple={false}
  labelField="label"
  valueField="id"
  strictMode={false}
  valueAsObject={false}
++  onChange={cache_selection}
++  createHandler={try_get_cache_selection}
/>

[mskocik]

Just a note: it's mandatory to have strictMode={false} for this workaround to work.

[galaczi]

Awesome, thank you!

[galaczi]

Is it possible this somehow causes an ordering issue? I provide the options ordered by id, I can see the json server response is correct, yet the dropdown shows the values out of order.

[mskocik]

just define searchProps={{ skipSort: true }} to disable sorting

BTW it's also written on fetch-related documentation page 😉