selectedValue is set to itself on load

[mtrevor]

I have a writable store that sends updates to an API when modified. I'm binding properties of the store to Select components using bind:selectedValue. This immediately sets the bound property to the provided value, even before any user interaction has occurred. I'm using a half-dozen of these components in a form, so the store believes it has been modified 6 times before anything has actually changed.

The problem isn't limited to stores: any bound selectedValue is immediately set to its contents when the component first loads.

I've provided a REPL that reproduces this:
https://svelte.dev/repl/0653cdd1cabc45528c675cf8d4de5831?version=3.29.7

[rob-balfre]

svelte-select does some setup after mount. There is some some legacy code from v1 and v2 of Svelte that needs refactoring.

This is a decent enough workaround ...
https://svelte.dev/repl/6a800e92632b4c57a87d65afe9c63591?version=3.29.7

[mtrevor]

Thank you, much appreciated.

[mtrevor]

I've had to scrap using svelte-select due to this issue. I have a derived store based on the writable store I'm using for a form; the derived store reacts to every binding of a writable store attribute to a svelte-select component just instantiating the form. Every workaround I've tried just ends up producing ugly code and leaves me feeling like I'm fighting against svelte.

I'll try to return to this myself when I get a chance, I just don't have the time for it atm.

[rob-balfre]

@mtrevor pretty sure now this is not an issue with svelte-select.

It's important to understand that binding to a child component will fire a reactive statement. Native HTML form elements (<input>, <select> etc) don't initialise so the reactive binding wont fire.

Here's an example that might help you...
https://svelte.dev/repl/8b4ee63e9e414a0bba4318ffdc5c17a3?version=3.29.7

[rob-balfre]

@mtrevor also this reply on discord might be of help ...

sveltejs/svelte#4447

[frederikhors]

@mtrevor can I ask you what alternative to svelte-select are you using?