fix: value/checked not correctly set using spread (#15239)

* set value/checked by JS

* test

* changeset

* fix test form-default-value-spread
pull/15274/head
adiGuba 7 months ago committed by GitHub
parent 85f83ec435
commit afae274587
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -0,0 +1,5 @@
---
'svelte': patch
---
fix: value/checked not correctly set using spread

@ -399,15 +399,18 @@ export function set_attributes(
if (name === 'value' || name === 'checked') { if (name === 'value' || name === 'checked') {
// removing value/checked also removes defaultValue/defaultChecked — preserve // removing value/checked also removes defaultValue/defaultChecked — preserve
let input = /** @type {HTMLInputElement} */ (element); let input = /** @type {HTMLInputElement} */ (element);
const use_default = prev === undefined;
if (name === 'value') { if (name === 'value') {
let prev = input.defaultValue; let previous = input.defaultValue;
input.removeAttribute(name); input.removeAttribute(name);
input.defaultValue = prev; input.defaultValue = previous;
// @ts-ignore
input.value = input.__value = use_default ? previous : null;
} else { } else {
let prev = input.defaultChecked; let previous = input.defaultChecked;
input.removeAttribute(name); input.removeAttribute(name);
input.defaultChecked = prev; input.defaultChecked = previous;
input.checked = use_default ? previous : false;
} }
} else { } else {
element.removeAttribute(key); element.removeAttribute(key);

@ -0,0 +1,33 @@
import { flushSync } from 'svelte';
import { test } from '../../test';
export default test({
async test({ target, assert }) {
// Test for https://github.com/sveltejs/svelte/issues/15237
const [setValues, clearValue] = target.querySelectorAll('button');
const [text1, text2, check1, check2] = target.querySelectorAll('input');
assert.equal(text1.value, '');
assert.equal(text2.value, '');
assert.equal(check1.checked, false);
assert.equal(check2.checked, false);
flushSync(() => {
setValues.click();
});
assert.equal(text1.value, 'message');
assert.equal(text2.value, 'message');
assert.equal(check1.checked, true);
assert.equal(check2.checked, true);
flushSync(() => {
clearValue.click();
});
assert.equal(text1.value, '');
assert.equal(text2.value, '');
assert.equal(check1.checked, false);
assert.equal(check2.checked, false);
}
});

@ -0,0 +1,22 @@
<script>
let value = $state();
let checked = $state(false);
function setValues() {
value = 'message';
checked = true;
}
function clearValues() {
value = null;
checked = null;
}
</script>
<button onclick={setValues}>setValues</button>
<button onclick={clearValues}>clearValues</button>
<input type="text" {value} />
<input type="text" {value} {...{}} />
<input type="checkbox" {checked} />
<input type="checkbox" {checked} {...{}} />
Loading…
Cancel
Save