Bug: sheet not closing on outside click after a popover within the sheet has been opened.

[jakob-osphim]

Describe the bug

When using a <Popover> in the <Sheet.Content>, the sheet does not close on outside clicks if the popover has been opened at least once. If the popover was not opened, the sheet closes as expected on outside click.

You can still close the sheet via the close button or pressing escape on the keyboard.

https://github.com/user-attachments/assets/45cabbb4-5feb-4818-a5d6-0327567bc184

Reproduction

https://stackblitz.com/edit/github-b4pwnb?file=src%2Froutes%2F%2Bpage.svelte

Logs

No response

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @sveltejs/kit: ^2.7.1 => 2.7.4 
    bits-ui: 1.0.0-next.39 => 1.0.0-next.39 
    cmdk-sv: ^0.0.13 => 0.0.13 
    formsnap: ^0.5.0 => 0.5.0 
    lucide-svelte: ^0.303.0 => 0.303.0 
    mode-watcher: ^0.2.1 => 0.2.1 
    svelte: ^5.0.0 => 5.1.9 
    svelte-sonner: ^0.3.18 => 0.3.18 
    sveltekit-superforms: ^2.5.0 => 2.5.0 
    vaul-svelte: ^0.2.4 => 0.2.4

Severity

annoyance

[huntabyte]

This is an interesting one because the sheet just uses bits-ui dialog under the hood, and I am not able to reproduce with the dialog && popover:

https://github.com/user-attachments/assets/a44449ce-0a2b-484a-a805-3e413b771d3b

[huntabyte]

I'm also not able to reproduce on the docs 🤔

https://github.com/user-attachments/assets/c85137e4-2a1e-4a63-887e-667697018f47

[huntabyte]

Alright, I think I found the difference; it seems to work when the page has an overflow and doesn't when the page does not. I'll look into this. Going to move it to Bits UI as it likely stems.

Disregard the last statement, I still cannot reproduce even without an overflow on the page.

[huntabyte]

Okay, it looks like you're using a mixture of dependencies, some of which rely on older versions of bits, like cmdk-sv and vaul-svelte(not @next) which could be the culprit. I'll work on adding a reproduction template for next soon.

https://stackblitz.com/github/huntabyte/scn-sheet-popover-repro?file=README.md

Here's your example but working as expected.

[jakob-osphim]

Thanks for looking into it so thoroughly! I seems mixing older versions of bits-ui indeed causes the problem.

I'll work on adding a reproduction template for next soon.

That would be super helpful. I am migrating a big project right now to svelte 5 using shadcn, so if there are any bugs I'll be sure to make quick repros for them. Though I was hoping to be able to use both bits-ui @0.x and @next in the same project to incrementally migrate the ui components. Do you think there is a way where that works?

[huntabyte]

You can @jakob-osphim, it just requires a bit of extra work.

You should be able to do something like this in your package.json:

"devDependencies": {
    "bits-ui": "0.21.0" // whatever svelte 4 version you are using,
    "bits-ui-next": "npm:bits-ui@next.40",
}

I believe it's called aliasing. I haven't personally tried it but have seen people talk about it before so perhaps that will work for you/your team 😃

[jakob-osphim]

Yes, this is exactly what I did. I had the command/dialog/popover... components in a separate components/ui/next folder and used them side by side with the old bits-ui components. It worked but for this sheet bug.

But now I actually completely removed bits-ui 0.x, and the bug still occurs in my project.

There has to be something else causing it for me. I'll investigate. 🧐

[jakob-osphim]

@huntabyte This issue is solved for me with bits-ui@1.0.0-next.42! :)

Thanks for you efforts!