primitives
primitives copied to clipboard
radix-ui
Nested popovers cause problems on Safari and Firefox
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 |
@cipriancaba I was facing the same but this solved mine https://github.com/radix-ui/primitives/issues/2348#issuecomment-1861480516
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"} ...
@cenobitedk That works indeed for clicking on the trigger, but it doesn't restore the whole UX, since e.g. handling outside click would require onOpenChange, which is triggered twice on Safari and Firefox with the values true and false.
