With Two Portalled components, neither work

ycs77 / headlessui-float

Easily use Headless UI with Floating UI to position floating elements.

https://headlessui-float.vercel.app

MIT License

342 stars 11 forks source link

With Two Portalled components, neither work #89

Closed JohnCampionJr closed 8 months ago

JohnCampionJr commented 8 months ago

Use Version Use version when bugs appear:

Headless UI: v1.7.5
Headless UI Float: v0.11.4
Framework: vue v3.3.0
Browser: all

Describe the bug If I have two portalled floating elements, neither work. It seems the Float is shared across all components

Expected behavior They should work :)

ycs77 commented 8 months ago

Hi, please provide a minimal reproducible example (like github repo, codesandbox, stackblitz...), it is recommended to fork the Headless UI Flaot's Online Demo to reproduce.

JohnCampionJr commented 8 months ago

I failed to make a repro - There must be something else conflicting with my project. I'll re-open if I figure out what it is

JohnCampionJr commented 8 months ago

Update for anyone else who encounters this - it is caused by Nuxt SSR. If I disable SSR or set these components in a ClientOnly wrapper, they work fine with portalling. Seems like fixed is a better strategy if SSR is important to you.

Not sure why it didn't dawn on me that SSR would break portalling, but it makes sense :)