Repository navigation
<select> needs two clicks when used with remote functions form #15835
Description
Describe the bug
When using a select within a remote functions form, clicking an option will not select the clicked option but the select will show empty instead. I need to click the same option again, only then is the option properly selected.
When I remove {...submitSelection} from the form element it works fine.
<script>
import { schema } from './dummy.common';
import { submitSelection } from './dummy.remote';
const options = [{ id: 1, name: `meditation` }, { id: 2, name: `yoga` }]
const selectedOption = $state(options[0]);
</script>
<form {...submitSelection} >
<select
{...submitSelection.fields.selection.as(`select`)}
value={selectedOption}
>
<option value={0}>Select an option</option>
{#each options as option (option.id)}
<option value={option.id}>{option.name}</option>
{/each}
</select>
<button type="submit" >Submit</button>
</form>Reproduction
Logs
System Info
System:
OS: macOS 15.7.4
CPU: (12) arm64 Apple M2 Max
Memory: 109.91 MB / 32.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 26.0.0 - /opt/homebrew/bin/node
Yarn: 1.22.22 - /opt/homebrew/bin/yarn
npm: 11.12.1 - /opt/homebrew/bin/npm
pnpm: 11.1.1 - /opt/homebrew/bin/pnpm
bun: 1.3.12 - /Users/Samuel/.bun/bin/bun
Deno: 2.7.14 - /opt/homebrew/bin/deno
Browsers:
Brave Browser: 147.1.89.137
Chrome: 148.0.7778.167
Edge: 148.0.3967.54
Firefox: 149.0
Safari: 18.6
npmPackages:
@sveltejs/adapter-vercel: ^6.3.3 => 6.3.3
@sveltejs/enhanced-img: ^0.10.4 => 0.10.4
@sveltejs/kit: ^2.59.1 => 2.59.1
@sveltejs/vite-plugin-svelte: ^7.0.0 => 7.0.0
svelte: ^5.55.5 => 5.55.5
vite: ^8.0.8 => 8.0.8Severity
serious, but I can work around it
Activity
Nic-Polumeyv commentedon Jun 7, 2026
Reproduces on
main, and it comes down to the option value type rather than anything remote-functions-specific..as('select')controls the select with a string (form data is always strings), but the options here use numeric values (<option value={option.id}>). A string never===the number an<option value={2}>stores, so on the first change the controlled value matches no option and the select reverts to empty. It only sticks on the second change because the value stops changing and Svelte stops re-applying it, which is the "two clicks."I reduced it away from remote functions to confirm:
<select value={x} onchange={(e) => (x = e.currentTarget.value)}>with numeric options two-clicks identically (xends up the string"2"), whilebind:valuewith the same options works first try because it preserves the number..as('select')selects on the first pick as soon as the option values are strings (value="1").So the app-side fix is string option values (or coercing to match the field type), since
.as('select')is necessarily string-typed.The thing that makes this so confusing is that no dev warning is emitted in any of these cases. Might be worth a Svelte warning when a
<select>'s value matches no option, since the silent revert-then-accept is the surprising part.