search

ycs77 / headlessui-float

Easily use Headless UI with Floating UI to position floating elements.
https://headlessui-float.vercel.app
MIT License
344 stars 11 forks source link

SSR Issue in Next.js #45

Closed doseofted closed 1 year ago

doseofted commented 1 year ago

Use Version Use version when bugs appear:

Describe the bug

In Next.js, usage of <Float /> creates an SSR issue due to a blank width attribute in the initial styles.

This is fixed by https://github.com/ycs77/headlessui-float/pull/44

To Reproduce

  1. git clone https://github.com/doseofted/headlessui-float-issue.git
  2. npm install
  3. npm run dev
  4. Open http://localhost:3000 and open console log / developer tools

Logs

Warning: Prop `style` did not match. Server: "position:fixed;z-index:9999;top:0;left:0;right:auto;bottom:auto;transform:translate(0px,0px)" Client: "position:fixed;z-index:9999;top:0;left:0;right:auto;bottom:auto;transform:translate(0px,0px);width:"
    at div
    at div
    at eval
...