New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
bind:group
does not work with nested components
#2308
Comments
Yeah, this won't work as things currently stand — the group has to be within the component. I suppose we could have a global |
Is there a workaround for this in v3? It makes components that use a checkbox pretty difficult/confusing to use if you need to use groups. https://svelte.dev/repl/1565708677134e418e256234984d90ef?version=3.12.1 |
Solution of this problem but without keep order of the selected items: https://svelte.dev/repl/de117399559f4e7e9e14e2fc9ab243cc?version=3.12.1 |
Universal toggle component: https://svelte.dev/repl/b63c813830274248a8fee5ecc667b15c?version=3.12.1 |
I know, this is obvious, but still. For those, who run into the same problem: It would be sufficient to make separate component for the group of checkboxes, e.g. CheckboxGroup, which you can bind to a group See the example and learn some russian words :) https://svelte.dev/repl/faabda4cabd544bd858a8a8abd0095f5?version=3.12.1 |
This came up in the Discord today, what would be needed to make this work? Intuitively I feel like this should work out of the box. |
What if you try like this?: https://svelte.dev/repl/42ff2937ebe345cc997fd080c347567c?version=3.20.1 |
Is this still being looked at? Would love for this to "just work", much like the rest of Svelte 😄. If there's anything I can do to help, let me know. |
@tamasPetki if you switch the inputs' type to https://svelte.dev/repl/45496f841fef41cc91012b12abf3f3fa?version=3.20.1 |
You will love this |
@SystemDZ Your example doesn't use nested components. The issue only occurs when nesting a component and trying to bind them to an input group. |
is there any update to this? Trying to figure this out myself. |
Just encountered this issue. I'm fine with the workarounds above, but I'm less thrilled with spending several hours figuring out I didn't have a bug all along - it was in svelte. I'm sure plenty of other people will also spend several hours banging their heads against the wall trying to figure out what they are doing wrong. |
Absurd & hacky but works : https://svelte.dev/repl/02d60142a1cc470bb43e0cfddaba4af1?version=3.38.3 EDIT : @locriacyber found a better solution here : #2308 (comment) |
@7antra Hahaha, that's beautiful. Thanks for sharing. |
@7antra you saved my day!!! thanks a lot!!! |
@7antra Yann!! Thank you so much for your help, coworker ;) |
Is there any movement forward with this? I spent hours to figure out nested binds are the problem and not me. |
Here's a simple solution without
Demo: |
Clarify documentation around when bind:group does and does not work. See issue sveltejs#2308
Clarify documentation around when bind:group does and does not work. See issue #2308
Isn't it possible to resolve this by reimplementing <script>
let checked = false;
export let value = '';
export let group = [];
const handleCheck = () => { group = [...group, value] };
const handleUncheck = () => { group = group.filter(checkedValue => checkedValue !== value) };
$: checked? handleCheck(): handleUncheck();
</script>
<input type="checkbox" value={value} bind:checked> and use it in the parent component
|
Stopped by to support the idea of fixing this. Thanks! My ScenarioA component library for a company-tailored Bootstrap. Would like to create a Checkbox component that handles all the Bootstrap things, and would like to provide the |
@webJose yes, this is what we ran into with Sveltestrap's Checkbox component for bootstrap when commented above. |
I have found myself with the same problem, each solution seems to have some sort of downside, for example:
For now, using a "checked" prop seems less verbose while having none of the above downsides, but it doesn't respect the insert order either: This is a Svelte 5 solution, but you can make it on Svelte 4 as well: <!-- app.svelte -->
<script>
import Checkbox from './Checkbox.svelte';
let options = $state([
{ "value": "t1", "checked": false },
{ "value": "t2", "checked": false },
{ "value": "t3", "checked": false }
])
let der = $derived(options.filter(o => o.checked === true).map(o => o.value))
</script>
<button onclick={() => options.unshift({ "value": "t"+options.length, "checked": false })}>add</button>
<button onclick={() => options = options.reverse()}>reverse</button>
<br><br>
{#each options as opt }
<Checkbox value={opt.value} bind:checked={opt.checked}/>
{/each}
<br><br>
Checked {der}
<!-- Checkbox.svelte -->
<script>
let { checked = $bindable(), value } = $props()
</script>
<label>
{value}:<input type="checkbox" {value} bind:checked />
</label> |
@imbolc I fixed your example in #11256. |
@iacore I don't think this is what is needed. What we want is to be able to bind:group over t he nested component. Instead of this: {#each menu as flavour}
<Flavour {flavour}/>
{/each}
<script>
import Flavour from "./Flavour.svelte"
let menu = [
'Cookies and cream',
'Mint choc chip',
'Raspberry ripple'
];
</script> We want this (note the binding in the Flavour component): {#each menu as flavour}
<Flavour {flavour} bind:group={selection} />
{/each}
<script>
import Flavour from "./Flavour.svelte"
let menu = [
'Cookies and cream',
'Mint choc chip',
'Raspberry ripple'
];
let selection = [];
</script> |
This is fixed as well in #11256. See PoC: https://github.com/iacore/fix-svelte-bind-group https://github.com/iacore/fix-svelte-bind-group/blob/main/src/App.svelte |
I'm trying to bind a store variable to group of checkboxes and it works till I move checkbox into a separate component, after that only one checkbox can be chosen at a time, here's an example from repl: https://gist.github.com/imbolc/e29205d6901d135c8c1bd8c3eec26d67
The text was updated successfully, but these errors were encountered: