List Input type Select ignores default value and only takes the first argument.

[Antoine-lb]

Check that this is really a bug

• [X] I confirm

Reproduction link

https://stackblitz.com/edit/konsta-svelte-osskwt?file=App.svelte

Bug description

List Input type Select ignores default value and only takes the first argument.

Expected Behavior

Uses the default value

Actual Behavior

Takes the first <option> as the default selected

Konsta UI version

1.0.2

Platform/Target and Browser Versions

Chrome macOS

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• [X] Make sure this is a Konsta UI issue and not a framework-specific issue

Would you like to open a PR for this bug?

• [ ] I'm willing to open a PR

[ibilux]

@Antoine-lb You need to use selected attribute to indicate that the option is initially selected.

So you need to change the line 37 in the example you provided like this:

<option value="Male">Male</option>

to:

<option value="Male" selected>Male</option>

[laryhills]

@ibilux @Antoine-lb You can also do this for a list of options

let defaultValue = "Male"
{#each gender as list_of_genders}
    {#if gender == defaultValue}
        <option value={gender} selected>{gender}</option>
    {:else}
    <option value={gender}>{gender}</option>
    {/if}
{/each}

[Antoine-lb]

@Antoine-lb You need to use selected attribute to indicate that the option is initially selected.

So you need to change the line 37 in the example you provided like this:

<option value="Male">Male</option>

to:

<option value="Male" selected>Male</option>

It works, thanks!

This means that defaultValue is not useful

[Antoine-lb]

@ibilux @Antoine-lb You can also do this for a list of options

let defaultValue = "Male"
{#each gender as list_of_genders}
    {#if gender == defaultValue}
        <option value={gender} selected>{gender}</option>
    {:else}
  <option value={gender}>{gender}</option>
    {/if}
{/each}

Good solution, I made it even simpler:

let defaultValue = "Female";
let genders = ["Female", "Male"]

{#each genders as gender}
  <option value={gender} selected={gender == defaultValue}>{gender}</option>    
{/each}