[bug]: Popover Inside Dialog Won't Open In Safari and Firefox

[mkellogg91]

Describe the bug

Problem

Radix Popover inside of a Radix Dialog will "flash" when attempting to open in Safari or Firefox.

Description

Everything described here is demonstrated in this sandbox: https://codesandbox.io/p/sandbox/k3lvp4

This behavior only happens when:

• vaul is in the dependency list (not even imported or used, JUST in the dependency list!!)
• it is running on firefox or safari
• the PopoverContent is wrapped in a PopoverPrimitive.Portal (shadcn provides popover content auto-wrapped in a primitive.portal: https://ui.shadcn.com/docs/components/popover)

If the conditions above are true, the popover's onOpenChange function gets called twice every time it is triggered so it flashes or just doens't show at all. If I simply go to the package.json and remove Vaul everything works as expected.

There are several issues that seem kind of similar out there on this repo's issue list but nothing that seemed exactly the same. However, Vaul does affect radix Popover.Root onOpenChange without being imported.

Versions

• this issue doesn't occur in Vaul version 0.87 and 0.72 but seems to happen in all others including latest.
• this issue occurs in Radix Popover and Radix Dialog Libraries (as seen in code sandbox) in several older versions as well as latest
• Firefox versions I tested: 134.0.2 (64-bit), 128.6.0esr (64-bit)
• Safari versions I tested: 18.3

Affected component/components

Popover, Dialog

How to reproduce

1. put a Popover inside a Dialog
2. ensure Popover content is inside of a popover portal (Shad puts content in a popover portal by default)
3. try to open the popover which is inside of a dialog in safari or firefox

can test this out in my codeSandbox demonstrating the issue here: https://codesandbox.io/p/sandbox/k3lvp4

Codesandbox/StackBlitz link

https://codesandbox.io/p/sandbox/k3lvp4

Logs

this is the result of a single click on the portal trigger (opening and closing immediately)


On open changed! Here is the event true index.js:27:25
On open changed! Here is the event false index.js:27:25

System Info

- this issue doesnt occur in Vaul version `0.87` and `0.72` but seems to happen in all others including `latest`.
- this issue occurs in Radix Popover and Radix Dialog Libraries (as seen in code sandbox) in several older versions as well as `latest`
- Firefox versions I tested: `134.0.2 (64-bit)`,  `128.6.0esr (64-bit)`
- Safari versions I tested: `18.3`

Before submitting

• [x] I've made research efforts and searched the documentation
• [x] I've searched for existing issues

[sangdth]

I believe I face the similar issue, I recorded the different here:

https://github.com/user-attachments/assets/35f7ba67-080d-4550-bfc3-81700ba04f7b

Versions:

• "@radix-ui/react-dialog": "^1.1.6"
• "@radix-ui/react-popover": "^1.1.6"
• "tailwindcss": "^4"
• Firefox: 136.0.1 (aarch64)
• Chrome: 134.0.6998.89 (Official Build) (arm64)

[ranlix]

Any update now? I found a similar issue, here is the demo: https://v0-add-calendar-button.vercel.app

[ranlix]

Any update now? I found a similar issue, here is the demo: https://v0-add-calendar-button.vercel.app

Found that adding modal={true} to Popover make it works

[mkellogg91]

Any update now? I found a similar issue, here is the demo: https://v0-add-calendar-button.vercel.app

Found that adding modal={true} to Popover make it works

This KIND of works but not really. Only works if you hardcode modal={true} but that can produce weird behavior if you don't track if dialog is open or not and it appears that if you use a state variable to dynamically set modal prop it still flashes. I don't know why...Here is the codesandbox: https://codesandbox.io/p/devbox/mystifying-burnell-forked-v8qp48?workspaceId=ws_4XcRKis93HfDtNSuX1WC3T

Note: works if you run on it on chrome but not on firefox/safari

how to reproduce weird behavior in the link above:

0.5 open in Firefox or Safari

1. click the "Popover Without Dialog Open Check" open button (first one)
2. click the "popover opener" button in the gray section that appears, you should see "Hello you opened the popover" appear
3. click outside of the gray are to close the dialog
4. observe that the page is now bricked and you can't click anything

this is because the popover is now a dialog and your "dialog" is still open inside the real dialog that has been closed. In the second button I didn't hardcode modal={true} instead I use modal={dialogOpen ? true : false} so modal is only on if the dialog is open but this brings the flashing back

[ranlix]

Any update now? I found a similar issue, here is the demo: https://v0-add-calendar-button.vercel.app

Found that adding modal={true} to Popover make it works

This KIND of works but not really. Only works if you hardcode modal={true} but that can produce weird behavior if you don't track if dialog is open or not and it appears that if you use a state variable to dynamically set modal prop it still flashes. I don't know why...Here is the codesandbox: https://codesandbox.io/p/devbox/mystifying-burnell-forked-v8qp48?workspaceId=ws_4XcRKis93HfDtNSuX1WC3T

Note: works if you run on it on chrome but not on firefox/safari

how to reproduce weird behavior in the link above:

0.5 open in Firefox or Safari

1. click the "Popover Without Dialog Open Check" open button (first one)
2. click the "popover opener" button in the gray section that appears, you should see "Hello you opened the popover" appear
3. click outside of the gray are to close the dialog
4. observe that the page is now bricked and you can't click anything

this is because the popover is now a dialog and your "dialog" is still open inside the real dialog that has been closed. In the second button I didn't hardcode modal={true} instead I use modal={dialogOpen ? true : false} so modal is only on if the dialog is open but this brings the flashing back

I see, but as a comparison, if a Select component is inside a dialog, its popover can be displayed normally.