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

Toggle disabled cannot set at runtime

Open BCsabaEngine opened this issue 1 year ago • 3 comments

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

BCsabaEngine avatar Oct 03 '24 09:10 BCsabaEngine

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

shinokada avatar Oct 04 '24 08:10 shinokada

<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 avatar Oct 04 '24 09:10 BCsabaEngine

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}

BCsabaEngine avatar Oct 04 '24 09:10 BCsabaEngine

Works perfectly, thanks!

BCsabaEngine avatar Oct 31 '24 07:10 BCsabaEngine