themesberg / flowbite-svelte

Official Svelte components built for Flowbite and Tailwind CSS
https://flowbite-svelte.com
MIT License
2.11k stars 258 forks source link

Checkbox bind:group no longer working with stores. #1391

Open randomiser opened 2 months ago

randomiser commented 2 months ago

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
alistair-white-fortesium commented 1 month ago

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).

mattdeboard commented 1 month ago

1398 seems related