Floating UI styles don't seem to clear correctly

[vexkiddy]

Describe the bug

I have a very large application that is using various floating shadcn-svelte components eg. drop downs, pop overs, tooltips etc. I often find that they become 'stuck' as in they stop working and won't display and even stop navigation of the rest of the application. I have to force a page reload to get them working again. i've noticed that sometimes these styles get stuck and don't get removed. Any idea why this is happening ? Do you have an recommendations how I should be using these components to stop this happening ? Maybe its how I've implemented them ?

Any suggestions or help would be greatly appreciated before closing this issue for not having a REPL :D

Reproduction

I can't reproduce this issue in a REPL as its part of a massive application with tooltips, dropdowns, and select boxes through out. It is most likely something to do with how these have been implemented. Some advice on best practices so this doesn't happen would be greatly appreciated.

Logs

System Info

System:
    OS: macOS 15.6.1
    CPU: (12) arm64 Apple M2 Max
    Memory: 100.59 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 24.5.0 - /Users/[REDACTED]/Library/pnpm/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 11.5.1 - /Users/[REDACTED]/Library/pnpm/npm
    pnpm: 10.20.0 - /Users/[REDACTED]/.nvm/versions/node/v23.1.0/bin/pnpm
    bun: 1.3.0 - /Users/[REDACTED]/.bun/bin/bun
  Browsers:
    Brave Browser: 143.1.85.120
    Chrome: 143.0.7499.193
    Firefox: 145.0.2
    Safari: 18.6
  npmPackages:
    @lucide/svelte: ^0.539.0 => 0.539.0 
    @sveltejs/kit: ^2.43.7 => 2.48.4 
    bits-ui: ^2.14.2 => 2.14.2 
    mode-watcher: ^1.1.0 => 1.1.0 
    svelte: ^5.43.2 => 5.43.2 
    svelte-sonner: ^1.0.5 => 1.0.5 
    tailwindcss: ^4.0.0 => 4.1.16

Severity

blocking all usage of shadcn-svelte

[ieedan]

Are you by chance using this in combination with any other ui libraries?

I have a fairly large Svelte application at work and I am using the old and new versions of bits-ui and had them mixed on some pages at one point and it was doing this. The fix was just to keep them isolated between pages.

[vexkiddy]

hihi.. nope i'm just using shadcn-svelte, thats it, no other UI libs or anything. I'm really not sure what is causing it. it seems to get worse the more floating ui components i use :( i'm just not sure where to start in terms of debugging the problem. i'm not doing anything crazy with the components.

[ieedan]

You're using floating ui components separate of bits-ui?

[vexkiddy]

it's just an alias in my mono repo. i just load the shadcn components into the the main project as i use them in other parts of the mono repo.

[vexkiddy]

regarding the button inside a button, that is in the shadcn-svelte dist folder though. regarding the main issue of the floating ui sticking and making the app non responsive, do you have any suggestions on how to approach debugging the issue ?

[ieedan]

regarding the button inside a button, that is in the shadcn-svelte dist folder though

Not sure what you mean by this

do you have any suggestions on how to approach debugging the issue

Without a repro it's pretty hard to see there are a few things you can check:

• Check if you're using async svelte. It's experimental and breaks a lot of things especially when preloading pages
• Resolve any errors like the button inside button errors cause that can pause js execution on the page

[vexkiddy]

Hiya @ieedan thanks for all the help. It looks like its been resolved now. I've updated all the versions of bits-ui, svelte, sveltekit, adpater etc and it seems to have solved the issue. According to the lovely people on the svelte discord, older versions of svelte would not catch silent errors, so looks like the upgrade sorted that out. Again thanks for your help, it was becoming a real pain to deal with !