SvelteKit - select multiple options not selected

[maxime-carbonneau]

In a SvelteKit project, when I submit a form, the initial values of the select are not set correctly. Try this on a new project

<script>
  import Svelecte from 'svelecte';

  let compagnies = [
    {id: 1, name: "un"},
    {id: 2, name: "deux"}
  ];

  function handleSubmit(e) {
    const s = this.querySelector('[name=compagnies]');
    alert(s.selectedOptions.length);
    e.preventDefault();
  }
</script>

<form method="post" on:submit={handleSubmit}>
  <Svelecte
    multiple
    name="compagnies"
    valueAsObject={true}
    options={compagnies}
    bind:value={compagnies}
    placeholder="Choisir des établissements">
  </Svelecte>
  <input type="submit" />
</form>

In the follow exemple, we should see 2 in the alert, but we see 1.

Il works as expected with svelte (https://svelte.dev/repl/67ef2ba738f648a78741b60b4ccc4f80?version=3.59.1). But with a new SvelteKit project, it does not.

[mskocik]

Do not use the same array for value and for options.

<script>
  import Svelecte from 'svelecte';

  let compagnies = [
    {id: 1, name: "un"},
    {id: 2, name: "deux"}
  ];
  let selection = compagnies.slice(0);

  function handleSubmit(e) {
    const s = this.querySelector('[name=compagnies]');
    alert(s.selectedOptions.length);
    e.preventDefault();
  }
</script>

<form method="post" on:submit={handleSubmit}>
  <Svelecte
    multiple
    name="compagnies"
    valueAsObject={true}
    options={compagnies}
    bind:value={selection}
    placeholder="Choisir des établissements">
  </Svelecte>
  <input type="submit" />
</form>

[maxime-carbonneau]

Il doesn't work if you access the page directly from the server. Strangly, it works with the router or with a hot-reload

[mskocik]

I found out that's actually svelte (or svelte/kit?) bug in SSR rendering context. You can't achieve correct behaviour even with native <select multiple>. I filled bug in svelte/kit.

[github-actions[bot]]

This issue is stale because it has been open 21 days with no activity. Remove stale label or comment or this will be closed in 3 days.

[miklereverie]

Hey guys, not entirely sure if it's related to this issue or not, but I'm having a similar problem:

If I have more than two items selected on a svelecte element with multiple, it never posts more than two when I get the formData inside a form action. It's like for some reason formData.getAll('svelecteInput') never receives an array with more than two elements.

Any clues?

[mskocik]

@miklereverie I would need to see working example of it... Otherwise I cannot tell, if it's the same hydration bug in svelte or something related to svelecte