Question - open/close drawer programmatically about daisyui HOT 3 CLOSED

Hi @gjovanov,
Whenever checkbox is checked, drawer opens and whenever it's unchecked, drawer gets closed. There's no trick.

As you can see here I'm controling the drawer of daisy.js.org using the checkbox.
It's a Vue project tho. I'm not sure how Svelte works but if you manage to check/uncheck the checkbox somehow, it will work. Maybe your Svelte code is changing the virtual DOM somehow and is not effecting the actual checkbox. Unfortunately I don't have any experience with Svelte.

from daisyui.

@gjovanov Have you tried using bind:checked={checked} instead of checked={checked}
I found this example and it seems to only work with bind:checked

from daisyui.

Hey @saadeghi ,
thanks for the suggestion.

Svelte doesn't have a Virtual DOM and it's more like a Compiler that compiles the reactivity into Vanilla JS. But, indeed, the issue was related to Svelte specifics with the bindings.

bind:checked={checked} works whereat checked={checked} doesn't. Still no idea why.

But in case when using a writable store like this:

const checked = writable(false)

then both of them work (notice the $ sign in the binding):

<input id="my-drawer1" type="checkbox" class="drawer-toggle" checked={$checked}>

<input id="my-drawer2" type="checkbox" class="drawer-toggle" bind:checked={$checked}>

Anyways, sorry to bother you with issues not related to Daisy UI.

The good news there is a way to manipulate the state of components like drawer, accordion etc via the state if its checkbox.

Thanks again..

Closing...

from daisyui.