themesberg / flowbite-svelte

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

Toggle disabled cannot set at runtime #1455

Open BCsabaEngine opened 1 week ago

BCsabaEngine commented 1 week ago

Describe the bug

I would like to set Toggle disabled status when sending in a form. (Input and Textarea works). I can enabled it with {disabled} property, but cannot at runtime.

Reproduction

<script lang="ts">
    import { Toggle } from 'flowbite-svelte';

    export let checked: boolean;
    export let inProgress = false;
</script>

<Toggle class="mt-3" bind:checked disabled={inProgress} />

not works, cannot set disabled from outside.

Flowbite version and System Info

System:
    OS: macOS 15.0
    CPU: (10) arm64 Apple M1 Pro
    Memory: 179.88 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.17.0 - /opt/homebrew/opt/node@20/bin/node
    npm: 10.8.2 - /opt/homebrew/opt/node@20/bin/npm
  Browsers:
    Chrome: 129.0.6668.60
    Safari: 18.0
  npmPackages:
    @sveltejs/kit: ^2.6.1 => 2.6.1 
    flowbite-svelte: ^0.46.22 => 0.46.22 
    svelte: ^4.2.19 => 4.2.19 
    vite: ^5.4.8 => 5.4.8
shinokada commented 1 week ago

Shouldn't it be export let inProgress = true;?

BCsabaEngine commented 1 week ago

<Input disabled={inProgress} /> works the same mode, but Toggle not.

The inProgress value comes from outside (parent form saving state), but Toggle cannot use it from variable, just <Toggle disabled={true} /> constant works.

BCsabaEngine commented 1 week ago

This is a working workaround but I should use the proper boolean mode

{#if inProgress}
    <Toggle bind:checked disabled={true} />
{:else}
    <Toggle bind:checked disabled={false} />
{/if}