floating-ui / floating-ui

A JavaScript library to position floating elements and create interactions for them.

Home Page:https://floating-ui.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

isPositioned never gets updated on Safari and Firefox

cipriancaba opened this issue · comments

Describe the bug I'm using this in a project with shadcn and the Calendar component which in turn is using radix ui which in turn is using react day picker which in turns is using floating ui.

Tried to debug this as deep as I could, but it's way too complex for me to grasp.

I've created a repro case which exhibits a very similar situation as to what I see in my actual project. Slight difference is that here the day picker will actually show for a fraction of the second while in my project it doesn't show at all.

As I said, debugging this on Chrome vs Safari and Firefox, realised that the isPositioned from useFloating never updates to true. Do you have any idea as to why that might happen?

Much appreciated

Steps to reproduce the behavior:

  1. Go to https://codesandbox.io/p/devbox/thirsty-stallman-s437k5?file=%2Fapp%2Fpage.tsx%3A21%2C44
  2. Click Open calendar
  3. Click Pick a date

Expected behavior A clear and concise description of what you expected to
happen.

Screenshots If applicable, add screenshots to help explain your problem.

Context:

  • OS: MacOS
  • Safari, Firefox
  • Version [e.g. 22]

Additional context Add any other context about the problem here.

The isPositioned value is a simple boolean that is certain to work reliably across browsers.

It's very likely the problem lies with the animation or interaction logic of the wrapper libraries being used, not this library. The fact that isPositioned isn't true is likely just because the floating element closes briefly after trying to open, which is a problem with the wrapper libraries' logic.

With that said, without a direct reproduction using only this library, we can't look into this particular issue