flowbite-svelte icon indicating copy to clipboard operation
flowbite-svelte copied to clipboard

Checkbox bind:group no longer working with stores.

Open randomiser opened this issue 1 year ago • 3 comments

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

randomiser avatar Jul 16 '24 04:07 randomiser

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

mattdeboard avatar Aug 10 '24 21:08 mattdeboard

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

herronelou avatar Sep 20 '24 17:09 herronelou

Same here, my company can't bump to Svelte 5 without this fix

thesiti92 avatar Oct 23 '24 14:10 thesiti92

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 avatar Oct 31 '24 17:10 shinokada

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.

scoopandrun avatar Feb 04 '25 12:02 scoopandrun

v1 should work. https://flowbite-svelte.com/docs/forms/checkbox

shinokada avatar May 09 '25 13:05 shinokada