fix: ensure bind:group works as intended with proxied state objects (#13939)

pull/13920/head
Dominic Gannaway 11 months ago committed by GitHub
parent 7bbaedd6c7
commit 1e6cf1bb40
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -0,0 +1,5 @@
---
'svelte': patch
---
fix: ensure bind:group works as intended with proxied state objects

@ -2,7 +2,7 @@ import { DEV } from 'esm-env';
import { render_effect, teardown } from '../../../reactivity/effects.js'; import { render_effect, teardown } from '../../../reactivity/effects.js';
import { listen_to_event_and_reset_event } from './shared.js'; import { listen_to_event_and_reset_event } from './shared.js';
import * as e from '../../../errors.js'; import * as e from '../../../errors.js';
import { get_proxied_value, is } from '../../../proxy.js'; import { is } from '../../../proxy.js';
import { queue_micro_task } from '../../task.js'; import { queue_micro_task } from '../../task.js';
import { hydrating } from '../../hydration.js'; import { hydrating } from '../../hydration.js';
import { is_runes } from '../../../runtime.js'; import { is_runes } from '../../../runtime.js';
@ -126,7 +126,7 @@ export function bind_group(inputs, group_index, input, get, set = get) {
if (is_checkbox) { if (is_checkbox) {
value = value || []; value = value || [];
// @ts-ignore // @ts-ignore
input.checked = get_proxied_value(value).includes(get_proxied_value(input.__value)); input.checked = value.includes(input.__value);
} else { } else {
// @ts-ignore // @ts-ignore
input.checked = is(input.__value, value); input.checked = is(input.__value, value);

@ -0,0 +1,19 @@
import { flushSync } from 'svelte';
import { test } from '../../test';
export default test({
html: `<button>+</button><input type="checkbox" value="1"><input type="checkbox" value="2"><input type="checkbox" value="3">\n[]`,
test({ assert, target }) {
const btn = target.querySelector('button');
btn?.click();
flushSync();
assert.equal(target.querySelectorAll('input')[1].checked, true);
assert.htmlEqual(
target.innerHTML,
`<button>+</button><input type="checkbox" value="1"><input type="checkbox" value="2"><input type="checkbox" value="3">\n["2"]`
);
}
});

@ -0,0 +1,12 @@
<script>
let checkboxes = $state([]);
let values = ['1', '2', '3'];
</script>
<button onclick={() => checkboxes.push('2')}>+</button>
{#each values as val, i}
<input type="checkbox" value={val} bind:group={checkboxes} />
{/each}
{JSON.stringify(checkboxes)}
Loading…
Cancel
Save