-
-
Notifications
You must be signed in to change notification settings - Fork 4.6k
Open
Description
Describe the bug
I would expect all of these to behave the same. Instead, the static value="initial"
in the third form gets treated as a defaultValue
.
<script>
let value = $state('initial');
</script>
<form>
<input value={value} />
<button type="reset">reset</button>
</form>
<hr>
<form>
<input bind:value={value} />
<button type="reset">reset</button>
</form>
<hr>
<form>
<input value="initial" />
<button type="reset">reset</button>
</form>
Another quirk: changing the defaultValue
of an <input>
erroneously changes the current value
, but only if the input has been reset and hasn't been interacted with since, and it doesn't have a non-static value
prop (not binding):
<script>
let value = $state('initial');
let defaultValue = $state('default');
</script>
<p>reset all forms, then change defaultValue</p>
<label>
<input bind:value={value} /> value
</label>
<label>
<input bind:value={defaultValue} /> defaultValue
</label>
<hr>
<form>
<input {...{ defaultValue }} value={value} />
<button type="reset">reset</button>
</form>
<hr>
<form>
<input {...{ defaultValue }} bind:value={value} />
<button type="reset">reset</button>
</form>
<hr>
<form>
<input {...{ defaultValue }} value="initial" />
<button type="reset">reset</button>
</form>
<hr>
<form>
<input {...{ value, defaultValue }} />
<button type="reset">reset</button>
</form>
Metadata
Metadata
Assignees
Labels
No labels