defaultValue is not working in `<input type=text>` when the initial value is null

[paulovieira]

Describe the bug

Documentation says:

Since 5.6.0, if an <input> has a defaultValue, it will revert to that value instead of the empty string when the form is reset. Note that for the initial render the value of the binding takes precedence unless it is null or undefined.

https://svelte.dev/docs/svelte/bind#input-bind:value

But if the initial value of the binding is null nothing is happening.

Reproduction

• open demo from day 4 of Advent of svelte: https://svelte.dev/playground/b30cfac16c3c4a3ab3d76ad20a5925cf?version=5.6.1
• set the initial value of wishlist to null

Logs

No response

System Info

System:
    OS: Linux 6.8 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
    CPU: (12) x64 12th Gen Intel(R) Core(TM) i7-1255U
    Memory: 3.40 GB / 15.33 GB
    Container: Yes
    Shell: 5.2.32 - /nix/store/qqz0gj9iaidabp7g34r2fb9mds6ahk8i-bash-interactive-5.2p32/bin/bash
  Binaries:
    Node: 22.9.0 - /nix/store/f9yl8nlgcyazflxc2nj1cr9k9ika7v7z-nodejs-22.9.0/bin/node
    npm: 10.8.3 - /nix/store/f9yl8nlgcyazflxc2nj1cr9k9ika7v7z-nodejs-22.9.0/bin/npm
    pnpm: 9.7.1 - /nix/store/0dvag1syzkbzrjdpppabnkws2vki5wr3-corepack-nodejs-22.9.0/bin/pnpm
  Browsers:
    Chrome: 131.0.6778.85

Severity

annoyance

[leonidaz]

it seems to work with undefined, e.g. wishlist = undefined;

there is also a difference between setting wishlist for the value attribute vs as child content on the textarea as far as handling empty string ''

• setting value displays defaultValue with undefined and empty string '' but not with null
• setting child content displays defaultValue with undefined only, neither empty string '' or null work.

At a first glance, don't know all of the implications, all 3: undefined, null and empty string should cause to display the defaultValue.

[dummdidumm]

It's working as described, because this is related to bind:value, not setting the value without a binding. There is a way to make it behave the same, though I'm not 100% sure if it's the right direction.

[leonidaz]

yeah, on second thought if null and undefined behave the same, especially given that json doesn't serialize undefined but ok with null, then empty string '' maybe an intentional choice.

[paulovieira]

Got it. The new defaultValue works only with the bind: directive (when the initial value of the binding is null or undefined). So it's working as intended.

To summarize, there are a few discrepancies that the user should be aware of:

1. this works (value set via bind:foo):

<script>
let foo = null; // will show the defaultValue; also works with undefined
</script>

<form>
	<textarea defaultValue="the default value" bind:value={foo}></textarea>
	<input type="reset" value="reset button">
</form>

2. this does not work (value set via <textarea>{foo}</textarea>):

<script>
let foo = null; // will show the empty string; however with undefined will show the defaultValue;
</script>

<form>
	<textarea defaultValue="the default value">{foo}</textarea>
	<input type="reset" value="reset button">
</form>

3. in either case, if the value is later set to null or undefined, will always show the empty string

<script>
let foo = undefined; // will show the defaultValue
setTimeout(function(){ foo = undefined }, 1000); // will show the empty string
</script>

<form>
	<textarea defaultValue="the default value" bind:value={foo}></textarea>
	<input type="reset" value="reset button">
</form>

Not sure if the svelte team wants to handle these particular cases. If not feel free to close this issue. Thanks.

[dummdidumm]

#14562 will, assuming it's merged, resolve the inconsistency between 1 and 2. 3 works as designed/expected.