Skip to content

Commit 7db8e13

Browse files
dummdidummdummdidumm
committed
same for checked
1 parent 0e9678b commit 7db8e13

File tree

3 files changed

+87
-42
lines changed

3 files changed

+87
-42
lines changed

‎packages/svelte/src/internal/client/dom/elements/attributes.js‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@ export function remove_input_defaults(input) {
6060
export function set_value(element, value) {
6161
// @ts-expect-error
6262
var attributes = (element.__attributes ??= {});
63+
6364
if (
6465
attributes.value ===
6566
(attributes.value =
@@ -68,8 +69,10 @@ export function set_value(element, value) {
6869
// @ts-expect-error
6970
// `progress` elements always need their value set when its `0`
7071
(element.value === value && (value !== 0 || element.nodeName !== 'PROGRESS'))
71-
)
72+
) {
7273
return;
74+
}
75+
7376
// @ts-expect-error
7477
element.value = value;
7578
}
@@ -82,7 +85,15 @@ export function set_checked(element, checked) {
8285
// @ts-expect-error
8386
var attributes = (element.__attributes ??= {});
8487

85-
if (attributes.checked === (attributes.checked = checked)) return;
88+
if (
89+
attributes.checked ===
90+
(attributes.checked =
91+
// treat null and undefined the same for the initial value
92+
checked ?? undefined)
93+
) {
94+
return;
95+
}
96+
8697
// @ts-expect-error
8798
element.checked = checked;
8899
}

‎packages/svelte/tests/runtime-runes/samples/form-default-value/_config.js‎

Lines changed: 43 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,9 @@ export default test({
3737
const after_reset = [];
3838

3939
const reset = /** @type {HTMLInputElement} */ (target.querySelector('input[type=reset]'));
40-
const [test1, test2, test3, test4, test5, test6, test13] = target.querySelectorAll('div');
41-
const [test7, test8, test9, test10] = target.querySelectorAll('select');
40+
const [test1, test2, test3, test4, test5, test6, test7, test14] =
41+
target.querySelectorAll('div');
42+
const [test8, test9, test10, test11] = target.querySelectorAll('select');
4243
const [
4344
test1_span,
4445
test2_span,
@@ -49,7 +50,8 @@ export default test({
4950
test7_span,
5051
test8_span,
5152
test9_span,
52-
test10_span
53+
test10_span,
54+
test11_span
5355
] = target.querySelectorAll('span');
5456

5557
{
@@ -133,6 +135,13 @@ export default test({
133135
{
134136
/** @type {NodeListOf<HTMLInputElement>} */
135137
const inputs = test5.querySelectorAll('input');
138+
check_inputs(inputs, 'checked', true);
139+
assert.htmlEqual(test5_span.innerHTML, 'true true');
140+
141+
for (const input of inputs) {
142+
set_input(input, 'checked', false);
143+
}
144+
flushSync();
136145
check_inputs(inputs, 'checked', false);
137146
assert.htmlEqual(test5_span.innerHTML, 'false false');
138147

@@ -145,86 +154,98 @@ export default test({
145154
{
146155
/** @type {NodeListOf<HTMLInputElement>} */
147156
const inputs = test6.querySelectorAll('input');
157+
check_inputs(inputs, 'checked', false);
158+
assert.htmlEqual(test6_span.innerHTML, 'false false');
159+
160+
after_reset.push(() => {
161+
check_inputs(inputs, 'checked', true);
162+
assert.htmlEqual(test6_span.innerHTML, 'true true');
163+
});
164+
}
165+
166+
{
167+
/** @type {NodeListOf<HTMLInputElement>} */
168+
const inputs = test7.querySelectorAll('input');
148169
check_inputs(inputs, 'checked', true);
149-
assert.htmlEqual(test6_span.innerHTML, 'true');
170+
assert.htmlEqual(test7_span.innerHTML, 'true');
150171

151172
after_reset.push(() => {
152173
check_inputs(inputs, 'checked', false);
153-
assert.htmlEqual(test6_span.innerHTML, 'false');
174+
assert.htmlEqual(test7_span.innerHTML, 'false');
154175
});
155176
}
156177

157178
{
158179
/** @type {NodeListOf<HTMLOptionElement>} */
159-
const options = test7.querySelectorAll('option');
180+
const options = test8.querySelectorAll('option');
160181
check_inputs(options, 'selected', [false, true, false]);
161-
assert.htmlEqual(test7_span.innerHTML, 'b');
182+
assert.htmlEqual(test8_span.innerHTML, 'b');
162183

163184
select_option(options[2]);
164185
flushSync();
165186
check_inputs(options, 'selected', [false, false, true]);
166-
assert.htmlEqual(test7_span.innerHTML, 'c');
187+
assert.htmlEqual(test8_span.innerHTML, 'c');
167188

168189
after_reset.push(() => {
169190
check_inputs(options, 'selected', [false, true, false]);
170-
assert.htmlEqual(test7_span.innerHTML, 'b');
191+
assert.htmlEqual(test8_span.innerHTML, 'b');
171192
});
172193
}
173194

174195
{
175196
/** @type {NodeListOf<HTMLOptionElement>} */
176-
const options = test8.querySelectorAll('option');
197+
const options = test9.querySelectorAll('option');
177198
check_inputs(options, 'selected', [false, true, false]);
178-
assert.htmlEqual(test8_span.innerHTML, 'b');
199+
assert.htmlEqual(test9_span.innerHTML, 'b');
179200

180201
select_option(options[2]);
181202
flushSync();
182203
check_inputs(options, 'selected', [false, false, true]);
183-
assert.htmlEqual(test8_span.innerHTML, 'c');
204+
assert.htmlEqual(test9_span.innerHTML, 'c');
184205

185206
after_reset.push(() => {
186207
check_inputs(options, 'selected', [false, true, false]);
187-
assert.htmlEqual(test8_span.innerHTML, 'b');
208+
assert.htmlEqual(test9_span.innerHTML, 'b');
188209
});
189210
}
190211

191212
{
192213
/** @type {NodeListOf<HTMLOptionElement>} */
193-
const options = test9.querySelectorAll('option');
214+
const options = test10.querySelectorAll('option');
194215
check_inputs(options, 'selected', [false, false, true]);
195-
assert.htmlEqual(test9_span.innerHTML, 'c');
216+
assert.htmlEqual(test10_span.innerHTML, 'c');
196217

197218
select_option(options[0]);
198219
flushSync();
199220
check_inputs(options, 'selected', [true, false, false]);
200-
assert.htmlEqual(test9_span.innerHTML, 'a');
221+
assert.htmlEqual(test10_span.innerHTML, 'a');
201222

202223
after_reset.push(() => {
203224
check_inputs(options, 'selected', [false, true, false]);
204-
assert.htmlEqual(test9_span.innerHTML, 'b');
225+
assert.htmlEqual(test10_span.innerHTML, 'b');
205226
});
206227
}
207228

208229
{
209230
/** @type {NodeListOf<HTMLOptionElement>} */
210-
const options = test10.querySelectorAll('option');
231+
const options = test11.querySelectorAll('option');
211232
check_inputs(options, 'selected', [false, false, true]);
212-
assert.htmlEqual(test10_span.innerHTML, 'c');
233+
assert.htmlEqual(test11_span.innerHTML, 'c');
213234

214235
select_option(options[0]);
215236
flushSync();
216237
check_inputs(options, 'selected', [true, false, false]);
217-
assert.htmlEqual(test10_span.innerHTML, 'a');
238+
assert.htmlEqual(test11_span.innerHTML, 'a');
218239

219240
after_reset.push(() => {
220241
check_inputs(options, 'selected', [false, true, false]);
221-
assert.htmlEqual(test10_span.innerHTML, 'b');
242+
assert.htmlEqual(test11_span.innerHTML, 'b');
222243
});
223244
}
224245

225246
{
226247
/** @type {NodeListOf<HTMLInputElement | HTMLTextAreaElement>} */
227-
const inputs = test13.querySelectorAll('input, textarea');
248+
const inputs = test14.querySelectorAll('input, textarea');
228249
assert.equal(inputs[0].value, 'x');
229250
assert.equal(/** @type {HTMLInputElement} */ (inputs[1]).checked, true);
230251
assert.equal(inputs[2].value, 'x');

‎packages/svelte/tests/runtime-runes/samples/form-default-value/main.svelte‎

Lines changed: 31 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -28,12 +28,16 @@
2828
let checked2 = $state();
2929
let checked3 = $state();
3030
let checked4 = $state();
31-
let checked5 = $state(false);
32-
let checked6 = $state(false);
33-
let checked7 = $state(false);
34-
let checked8 = $state(false);
35-
let checked9 = $state(true);
36-
let checked10 = $state(true);
31+
let checked5 = $state(null);
32+
let checked6 = $state(null);
33+
let checked7 = $state(null);
34+
let checked8 = $state(null);
35+
let checked9 = $state(false);
36+
let checked10 = $state(false);
37+
let checked11 = $state(false);
38+
let checked12 = $state(false);
39+
let checked13 = $state(true);
40+
let checked14 = $state(true);
3741
3842
3943
let selected1 = $state();
@@ -94,18 +98,26 @@
9498
<input type="checkbox" defaultChecked bind:checked={checked4} />
9599
</div>
96100

97-
<!-- defaultChecked=true, checked=false -->
101+
<!-- defaultChecked=true, checked=null -->
98102
<div class="test-5">
99103
<input type="checkbox" {defaultChecked} checked={checked5} />
100104
<input type="checkbox" {defaultChecked} bind:checked={checked6} />
101105
<input type="checkbox" defaultChecked checked={checked7} />
102106
<input type="checkbox" defaultChecked bind:checked={checked8} />
103107
</div>
104108

105-
<!-- defaultChecked=false, checked=true -->
109+
<!-- defaultChecked=true, checked=false -->
106110
<div class="test-6">
107-
<input type="checkbox" defaultChecked={false} checked={checked9} />
108-
<input type="checkbox" defaultChecked={false} bind:checked={checked10} />
111+
<input type="checkbox" {defaultChecked} checked={checked9} />
112+
<input type="checkbox" {defaultChecked} bind:checked={checked10} />
113+
<input type="checkbox" defaultChecked checked={checked11} />
114+
<input type="checkbox" defaultChecked bind:checked={checked12} />
115+
</div>
116+
117+
<!-- defaultChecked=false, checked=true -->
118+
<div class="test-7">
119+
<input type="checkbox" defaultChecked={false} checked={checked13} />
120+
<input type="checkbox" defaultChecked={false} bind:checked={checked14} />
109121
</div>
110122

111123
<!-- no support for bind:group; too complex + we may deprecate it in favor of bind:checked={get,set} -->
@@ -158,7 +170,7 @@
158170
</select>
159171

160172
<p>Static values</p>
161-
<div class="test-12">
173+
<div class="test-14">
162174
<input value="x" defaultValue="y" />
163175
<input type="checkbox" checked defaultChecked={false} />
164176
<textarea defaultValue="y">x</textarea>
@@ -174,11 +186,12 @@
174186
<span class="test-3">{value17} {value20} {value22} {value24}</span>
175187
<span class="test-4">{checked2} {checked4}</span>
176188
<span class="test-5">{checked6} {checked8}</span>
177-
<span class="test-6">{checked10}</span>
178-
<span class="test-7">{selected1}</span>
179-
<span class="test-8">{selected2}</span>
180-
<span class="test-9">{selected3}</span>
181-
<span class="test-10">{selected4}</span>
182-
<span class="test-11">{selected5}</span>
183-
<span class="test-12">{selected6}</span>
189+
<span class="test-6">{checked10} {checked12}</span>
190+
<span class="test-7">{checked14}</span>
191+
<span class="test-8">{selected1}</span>
192+
<span class="test-9">{selected2}</span>
193+
<span class="test-10">{selected3}</span>
194+
<span class="test-11">{selected4}</span>
195+
<span class="test-12">{selected5}</span>
196+
<span class="test-13">{selected6}</span>
184197
</p>

0 commit comments

Comments
 (0)