Default value not working in select

The default select value is not applied to the select widget.

<script>
  var users = {
    1: {name: "aaa"},
    2: {name: "bbb"},
    3: {name: "ccc"},
  };
  var user_id=2;
</script>
 
<select value={user_id}>
  {#each Object.entries(users) as [k, v]}
    <option value={k}>{v.name}</option>
  {/each}
</select>

https://svelte.dev/repl/895418a4cb0249a1af034cfbb71e7ae6?version=3.24.0

I expect bbb to be selected.

Chrome Version 83.0.4103.116 (Official Build) (64-bit) Windows 7

It’s strange, not too severe.

If I change the type of user_id to string it works, but why should I?

[afaur]

@axil

• Indices having gaps does make it a little tricky.
• If you convert your ids beforehand it may make your each more performant, but not absolutely sure.
  • Update: Not sure that a json parse from fetch supports numeric keys so this example may be incorrect.
• https://svelte.dev/repl/47cd2ed3438440d99393499cbf4c641b?version=3.24.0

<script>
  import { onMount } from 'svelte'
  import { fetch } from './Fetch.svelte'

  let users = {}, userIds = []	

  let selectedUserId = 5
	
  onMount(async () => {
    const response = await fetch('http://www.site.com/databaseUsers.json')
    users = await response.json()
    userIds = Object.keys(users).map(userId => parseInt(userId, 10))
  })

  $: console.log(selectedUserId)
</script>

<select bind:value={ selectedUserId }>
  { #each userIds as userId }
    <option value={ userId }>{ users[userId].name }</option>
  { /each }
</select>

Fetch.svelte

<script context='module'>
  export const fetch = async url => ({
    async json() {
      return {
        1: { name: "aaa" },
        5: { name: "bbb" },
        7: { name: "ccc" }
      }
    }
  })
</script>

[axil]

@antony Nevermind! I’m still a big fan of svelte and I appreciate the efforts you make to support and maintain it.

@afaur Actually, in my particular case the indices of the users are taken from the database and can contain gaps when they are deleted.

What about this variant – just one symbol to fix the problem:

<script>
  var users = {
    1: {name: "aaa"},
    2: {name: "bbb"},
    3: {name: "ccc"},
  };
  var user_id=2;
</script>
 
<select value={user_id}>
  {#each Object.entries(users) as [k, v]}
    <option value={+k}>{v.name}</option>
  {/each}
</select>