Checkbox bind:group no longer working with stores.
Describe the bug
The Checkbox component no longer seems to bind correctly with writable stores.
In the example provided clicking on the Checkbox to toggle on/off doesn't update the contents of the $store.ids. Whereas the default HTML version works as expected.
Reproduction
const store = writable({ids: []});
Store: {JSON.stringify($store, null, 2)}
Doesn't update store:
<Checkbox name="ids" value={1} bind:group={$store.ids} /> FLOWBITE
Updates store:
<input name="ids" type="checkbox" value={1} bind:group={$store.ids} /> HTML
Flowbite version and System Info
System:
OS: macOS 14.5
CPU: (8) x64 Apple M1
Memory: 22.26 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 22.2.0 - /usr/local/opt/node@20/bin/node
npm: 10.7.0 - /usr/local/opt/node@20/bin/npm
Browsers:
Chrome: 126.0.6478.127
Safari: 17.5
npmPackages:
@sveltejs/kit: ^2.3.0 => 2.5.18
flowbite-svelte: ^0.46.0 => 0.46.15
svelte: ^4.0.0 => 4.2.18
vite: ^5.0.0 => 5.3.3
From looking at the source code I think the groups binding is just generally broken, not just for stores. I don't quite understand - this checkin here completely changed how the groups binding works, and in my opinion for the worse? https://github.com/themesberg/flowbite-svelte/commit/47a90d2d7e342550e06409076e97bf52f4378e7d
Its now expecting to pass in an array of choices, which just seems much more limiting? What was wrong with the implementation before (other than the general hacky nature of it but its a svelte bug anyway).
#1398 seems related
I have the exact same issue, updated flowbite-svelte yesterday and whole website exploded, none of my filters or checkboxes work anymore, this is a major problem as far as I'm concerned. @shinokada
Same here, my company can't bump to Svelte 5 without this fix
I think this is fixed by the latest version.
See this http://localhost:8080/docs/forms/checkbox. Please let me know. If it is not can you give me an example code or statckblitz example?
I think this is fixed by the latest version.
See this http://localhost:8080/docs/forms/checkbox. Please let me know. If it is not can you give me an example code or statckblitz example?
@shinokada The "localhost" link cannot work for everyone to see.
I can confirm that the bind:group functionality doesn't work as expected.
You can only use it when passing a choices array, which is not an option in many cases.
Also, please note that the group type string[] is far too limiting and should be any[], as you can you can use an array of any object/non-object items for the group.
See REPL for an example of bind:group on objects.
v1 should work. https://flowbite-svelte.com/docs/forms/checkbox