Skip to content

<select bind:value={object}> does not reflect selected value after async list update #16293

@Gokuldev23

Description

@Gokuldev23

Describe the bug

When binding an object (not a primitive) to a using bind:value, and the options array is populated asynchronously (e.g., after an API call), the initially set selected value shows at first when you enter the page but one refresh the page the default option doesn't appear as selected in the UI — even though the bound value and the options are clearly updated. The options render correctly, but no option is shown as selected. Reproduction Logs export let sections = [] let section const onChange = () => { if(section!=null) //dispatch("change",section) } $: onChange(section) $: console.log({section}) // updates correctly here </script> <div class="sections"> <p class="title-str">{t_title}</p> <select name="" id="" bind:value={section}> {#each sections as section} <option class="a-section" value={section}> {section.section_num}. {section.title} </option> {/each} </select> </div> System Info System: OS: Linux 5.15 Linux Mint 21.3 (Virginia) CPU: (4) x64 11th Gen Intel(R) Core(TM) i3-1115G4 @ 3.00GHz Memory: 2.48 GB / 7.54 GB Container: Yes Shell: 5.1.16 - /bin/bash Binaries: Node: 22.2.0 - ~/.nvm/versions/node/v22.2.0/bin/node npm: 10.7.0 - ~/.nvm/versions/node/v22.2.0/bin/npm pnpm: 10.11.0 - ~/.nvm/versions/node/v22.2.0/bin/pnpm Browsers: Chrome: 137.0.7151.55 Severity annoyance

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions