Nested popovers cause problems on Safari and Firefox

[cipriancaba]

Bug report

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

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 isPositioned from useFloating only updates to true on Chrome to trigger the layout effect. Do you have any idea as to why that might happen?

Much appreciated

Current Behavior

Calendar doesn't show show on safari and firefox

Expected behavior

correctly display the popup

Reproducible example

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

Suggested solution

Additional context

https://github.com/shadcn-ui/ui/issues/3516

Your environment

Software	Name(s)	Version
Radix Package(s)
React	n/a
Browser
Assistive tech
Node	n/a
npm/yarn
Operating System

[praveenaj]

@cipriancaba I was facing the same but this solved mine https://github.com/radix-ui/primitives/issues/2348#issuecomment-1861480516

[cipriancaba]

Thx @praveenaj tried that didn't work

[cenobitedk]

I had a very similar problem. DatePicker inside a dialog or sheet won't open at all. And only in Firefox or Safari.

However, I found a solution that mitigates the problem. By adding manual control of the open state, it works.

  const [open, setOpen] = React.useState(false);

  return (
    <Popover open={open}>
      <PopoverTrigger asChild onClick={() => setOpen(!open)}>
        <Button variant={"outline"} ...