Drawer breaks page scrolling

[gdude2002]

Describe the bug

I'm not sure if this is an integration issue or a Vaul bug, but opening a drawer seems to break scrolling - neither the menu nor the page can be scrolled until the page is reloaded.

Reproduction

Live: https://moderation.wiki/a/2024-03-04-test
GitHub: https://github.com/cmc-discord/site/blob/main/src/lib/components/ui/navbar/navbar.svelte#L17

1. Open the page on mobile, or make the viewpoint less wide until you can see the menu button in the navbar
2. Click/tap the menu button
3. Scrolling no longer works

Reproduced using Chrome on Windows, and Vivaldi and Chrome on Android.

Logs

No response

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (32) x64 AMD Ryzen 9 5950X 16-Core Processor
    Memory: 93.23 GB / 127.91 GB
  Binaries:
    Node: 20.11.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.15.0 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Edge: Chromium (122.0.2365.66)
    Internet Explorer: 11.0.22621.1

Severity

blocking an upgrade

[github-actions]

Please provide a reproduction.

More info

Why do I need to provide a reproduction?

This project is maintained by a very small team, and we simply don't have the bandwidth to investigate issues that we can't easily replicate. Reproductions enable us to fix issues faster and more efficiently. If you care about getting your issue resolved, providing a reproduction is the best way to do that.

I've provided a reproduction - what happens now?

Once a reproduction is provided, we'll remove the needs reproduction label and review the issue to determine how to resolve it. If we can confirm it's a bug, we'll label it as such and prioritize it based on its severity.

If needs reproduction labeled issues don't receive any activity (e.g., a comment with a reproduction link), they'll be closed. Feel free to comment with a reproduction at any time and the issue will be reopened.

How can I create a reproduction?

You can use this template to create a minimal reproduction. You can also link to a GitHub repository with the reproduction.

Please ensure that the reproduction is as minimal as possible. If there is a ton of custom logic in your reproduction, it is difficult to determine if the issue is with your code or with the library. The more minimal the reproduction, the more likely it is that we'll be able to assist.

You might also find these other articles interesting and/or helpful:

• The Importance of Reproductions
• How to Generate a Minimal, Complete, and Verifiable Example

[huntabyte]

Please provide a more minimal reproduction without the addition of all the extra styles and structure you have going on.

[gdude2002]

Having tried to work on a lighter reproduction, I've realised that my IDE completed Vaul's import instead of shadcn's, and I didn't notice. Sorry about that! I'll close this issue immediately.

One thing to note, though, is that your Stackblitz link isn't working for me:

[huntabyte]

Will take a look at the repro template to get it worked out! This is why we started enforcing minimal repros haha oftentimes we find it is something small that ends up showing itself when you peel back the layers! Thank you!