huntabyte / vaul-svelte

An unstyled drawer component for Svelte.
https://vaul-svelte.com
MIT License
469 stars 19 forks source link

bug: open not triggering correctly #59

Closed MentalGear closed 9 months ago

MentalGear commented 9 months ago

Describe the bug

When using the open prop to switch the modal/drawer, after the first open/close, it won't correctly trigger anymore, even blocking scroll.

Reproduction

Use open={true} to init, then close the modal. You will notice that the page behind is not scrollable anymore (chrome latest).

Logs

No response

System Info

System:
    OS: macOS 10.15.7
    CPU: (6) x64 Intel(R) Core(TM) i5-8500 CPU @ 3.00GHz
    Memory: 1.31 GB / 40.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 20.11.0 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 7.10.0 - ~/node_modules/.bin/npm
  Browsers:
    Chrome: 121.0.6167.184
    Firefox: 123.0
    Safari: 15.6.1
  npmPackages:
    @sveltejs/kit: ^2.5.0 => 2.5.0 
    bits-ui: ^0.18.1 => 0.18.1 
    svelte: 5.0.0-next.51 => 5.0.0-next.51 
    typescript: ^5.3.3 => 5.3.3 
    vaul-svelte: ^0.2.3 => 0.2.3

Severity

annoyance

shyakadavis commented 9 months ago

Hi;

Without a repro, I can try guessing what the problem is; i.e. I think you're not binding to the state variable.

Try:


<script>

let open = false;

</script>

<Drawer.Root bind:open>
...

Does that work?
huntabyte commented 9 months ago

What @shyakadavis, if you want the two-way binding to occur (meaning the child is able to update state in the parent) you must prefix the variable with bind.