msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

same for checked

Browse Source
pull/14562/head
Simon Holthausen 2 years ago
parent 0e9678b95f
commit 7db8e13f19
3 changed files with 87 additions and 42 deletions
Show Stats Download Patch File Download Diff File

15
packages/svelte/src/internal/client/dom/elements/attributes.js
Unescape View File

@ -60,6 +60,7 @@ export function remove_input_defaults(input) {
export function set_value(element, value) {
// @ts-expect-error
var attributes = (element.__attributes ??= {});
if (
attributes.value ===
(attributes.value =
@ -68,8 +69,10 @@ export function set_value(element, value) {
// @ts-expect-error
// `progress` elements always need their value set when its `0`
(element.value === value && (value !== 0 || element.nodeName !== 'PROGRESS'))
)
) {
return;
}
// @ts-expect-error
element.value = value;
}
@ -82,7 +85,15 @@ export function set_checked(element, checked) {
// @ts-expect-error
var attributes = (element.__attributes ??= {});
if (attributes.checked === (attributes.checked = checked)) return;
if (
attributes.checked ===
(attributes.checked =
// treat null and undefined the same for the initial value
checked ?? undefined)
) {
return;
}
// @ts-expect-error
element.checked = checked;
}

65
packages/svelte/tests/runtime-runes/samples/form-default-value/_config.js
Unescape View File

@ -37,8 +37,9 @@ export default test({
const after_reset = [];
const reset = /** @type {HTMLInputElement} */ (target.querySelector('input[type=reset]'));
const [test1, test2, test3, test4, test5, test6, test13] = target.querySelectorAll('div');
const [test7, test8, test9, test10] = target.querySelectorAll('select');
const [test1, test2, test3, test4, test5, test6, test7, test14] =
target.querySelectorAll('div');
const [test8, test9, test10, test11] = target.querySelectorAll('select');
const [
test1_span,
test2_span,
@ -49,7 +50,8 @@ export default test({
test7_span,
test8_span,
test9_span,
test10_span
test10_span,
test11_span
] = target.querySelectorAll('span');
{
@ -133,6 +135,13 @@ export default test({
{
/** @type {NodeListOf<HTMLInputElement>} */
const inputs = test5.querySelectorAll('input');
check_inputs(inputs, 'checked', true);
assert.htmlEqual(test5_span.innerHTML, 'true true');
for (const input of inputs) {
set_input(input, 'checked', false);
}
flushSync();
check_inputs(inputs, 'checked', false);
assert.htmlEqual(test5_span.innerHTML, 'false false');
@ -145,86 +154,98 @@ export default test({
{
/** @type {NodeListOf<HTMLInputElement>} */
const inputs = test6.querySelectorAll('input');
check_inputs(inputs, 'checked', false);
assert.htmlEqual(test6_span.innerHTML, 'false false');
after_reset.push(() => {
check_inputs(inputs, 'checked', true);
assert.htmlEqual(test6_span.innerHTML, 'true');
assert.htmlEqual(test6_span.innerHTML, 'true true');
});
}
{
/** @type {NodeListOf<HTMLInputElement>} */
const inputs = test7.querySelectorAll('input');
check_inputs(inputs, 'checked', true);
assert.htmlEqual(test7_span.innerHTML, 'true');
after_reset.push(() => {
check_inputs(inputs, 'checked', false);
assert.htmlEqual(test6_span.innerHTML, 'false');
assert.htmlEqual(test7_span.innerHTML, 'false');
});
}
{
/** @type {NodeListOf<HTMLOptionElement>} */
const options = test7.querySelectorAll('option');
const options = test8.querySelectorAll('option');
check_inputs(options, 'selected', [false, true, false]);
assert.htmlEqual(test7_span.innerHTML, 'b');
assert.htmlEqual(test8_span.innerHTML, 'b');
select_option(options[2]);
flushSync();
check_inputs(options, 'selected', [false, false, true]);
assert.htmlEqual(test7_span.innerHTML, 'c');
assert.htmlEqual(test8_span.innerHTML, 'c');
after_reset.push(() => {
check_inputs(options, 'selected', [false, true, false]);
assert.htmlEqual(test7_span.innerHTML, 'b');
assert.htmlEqual(test8_span.innerHTML, 'b');
});
}
{
/** @type {NodeListOf<HTMLOptionElement>} */
const options = test8.querySelectorAll('option');
const options = test9.querySelectorAll('option');
check_inputs(options, 'selected', [false, true, false]);
assert.htmlEqual(test8_span.innerHTML, 'b');
assert.htmlEqual(test9_span.innerHTML, 'b');
select_option(options[2]);
flushSync();
check_inputs(options, 'selected', [false, false, true]);
assert.htmlEqual(test8_span.innerHTML, 'c');
assert.htmlEqual(test9_span.innerHTML, 'c');
after_reset.push(() => {
check_inputs(options, 'selected', [false, true, false]);
assert.htmlEqual(test8_span.innerHTML, 'b');
assert.htmlEqual(test9_span.innerHTML, 'b');
});
}
{
/** @type {NodeListOf<HTMLOptionElement>} */
const options = test9.querySelectorAll('option');
const options = test10.querySelectorAll('option');
check_inputs(options, 'selected', [false, false, true]);
assert.htmlEqual(test9_span.innerHTML, 'c');
assert.htmlEqual(test10_span.innerHTML, 'c');
select_option(options[0]);
flushSync();
check_inputs(options, 'selected', [true, false, false]);
assert.htmlEqual(test9_span.innerHTML, 'a');
assert.htmlEqual(test10_span.innerHTML, 'a');
after_reset.push(() => {
check_inputs(options, 'selected', [false, true, false]);
assert.htmlEqual(test9_span.innerHTML, 'b');
assert.htmlEqual(test10_span.innerHTML, 'b');
});
}
{
/** @type {NodeListOf<HTMLOptionElement>} */
const options = test10.querySelectorAll('option');
const options = test11.querySelectorAll('option');
check_inputs(options, 'selected', [false, false, true]);
assert.htmlEqual(test10_span.innerHTML, 'c');
assert.htmlEqual(test11_span.innerHTML, 'c');
select_option(options[0]);
flushSync();
check_inputs(options, 'selected', [true, false, false]);
assert.htmlEqual(test10_span.innerHTML, 'a');
assert.htmlEqual(test11_span.innerHTML, 'a');
after_reset.push(() => {
check_inputs(options, 'selected', [false, true, false]);
assert.htmlEqual(test10_span.innerHTML, 'b');
assert.htmlEqual(test11_span.innerHTML, 'b');
});
}
{
/** @type {NodeListOf<HTMLInputElement | HTMLTextAreaElement>} */
const inputs = test13.querySelectorAll('input, textarea');
const inputs = test14.querySelectorAll('input, textarea');
assert.equal(inputs[0].value, 'x');
assert.equal(/** @type {HTMLInputElement} */ (inputs[1]).checked, true);
assert.equal(inputs[2].value, 'x');

49
packages/svelte/tests/runtime-runes/samples/form-default-value/main.svelte
Unescape View File

@ -28,12 +28,16 @@
let checked2 = $state();
let checked3 = $state();
let checked4 = $state();
let checked5 = $state(false);
let checked6 = $state(false);
let checked7 = $state(false);
let checked8 = $state(false);
let checked9 = $state(true);
let checked10 = $state(true);
let checked5 = $state(null);
let checked6 = $state(null);
let checked7 = $state(null);
let checked8 = $state(null);
let checked9 = $state(false);
let checked10 = $state(false);
let checked11 = $state(false);
let checked12 = $state(false);
let checked13 = $state(true);
let checked14 = $state(true);
let selected1 = $state();
@ -94,7 +98,7 @@
<input type="checkbox" defaultChecked bind:checked={checked4} />
</div>
<!-- defaultChecked=true, checked=false -->
<!-- defaultChecked=true, checked=null -->
<div class="test-5">
<input type="checkbox" {defaultChecked} checked={checked5} />
<input type="checkbox" {defaultChecked} bind:checked={checked6} />
@ -102,10 +106,18 @@
<input type="checkbox" defaultChecked bind:checked={checked8} />
</div>
<!-- defaultChecked=false, checked=true -->
<!-- defaultChecked=true, checked=false -->
<div class="test-6">
<input type="checkbox" defaultChecked={false} checked={checked9} />
<input type="checkbox" defaultChecked={false} bind:checked={checked10} />
<input type="checkbox" {defaultChecked} checked={checked9} />
<input type="checkbox" {defaultChecked} bind:checked={checked10} />
<input type="checkbox" defaultChecked checked={checked11} />
<input type="checkbox" defaultChecked bind:checked={checked12} />
</div>
<!-- defaultChecked=false, checked=true -->
<div class="test-7">
<input type="checkbox" defaultChecked={false} checked={checked13} />
<input type="checkbox" defaultChecked={false} bind:checked={checked14} />
</div>
<!-- no support for bind:group; too complex + we may deprecate it in favor of bind:checked={get,set} -->
@ -158,7 +170,7 @@
</select>
<p>Static values</p>
<div class="test-12">
<div class="test-14">
<input value="x" defaultValue="y" />
<input type="checkbox" checked defaultChecked={false} />
<textarea defaultValue="y">x</textarea>
@ -174,11 +186,12 @@
<span class="test-3">{value17} {value20} {value22} {value24}</span>
<span class="test-4">{checked2} {checked4}</span>
<span class="test-5">{checked6} {checked8}</span>
<span class="test-6">{checked10}</span>
<span class="test-7">{selected1}</span>
<span class="test-8">{selected2}</span>
<span class="test-9">{selected3}</span>
<span class="test-10">{selected4}</span>
<span class="test-11">{selected5}</span>
<span class="test-12">{selected6}</span>
<span class="test-6">{checked10} {checked12}</span>
<span class="test-7">{checked14}</span>
<span class="test-8">{selected1}</span>
<span class="test-9">{selected2}</span>
<span class="test-10">{selected3}</span>
<span class="test-11">{selected4}</span>
<span class="test-12">{selected5}</span>
<span class="test-13">{selected6}</span>
</p>

Write Preview
Loading…
Cancel
Save