shadcn's popover does not receive pointer events

[tender dew]

I’m building a calendar app using shadcn/ui.
Each calendar event opens a Dialog for editing. Inside that dialog, I have a Popover used as a date picker. Within that popover, there’s another nested Popover (a “Duration” submenu).

The issue: the nested PopoverTrigger does nothing when clicked.
No errors are thrown. The trigger renders, but clicks don’t open the submenu.

Things I’ve already tried:

pointer-events-auto

Increasing z-index

modal={false} on the inner popover

None of these worked.

Is this a limitation/expected behavior with nested Popovers inside a Dialog, or is there a correct way to structure this with shadcn/ui (e.g. portals, modal flags, or a different component)?

//Dialog with Popover
import { Dialog, DialogContent } from "@/components/ui/dialog"
import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover"

export default function Example() {
  return (
    <Dialog open>
      <DialogContent>
        <Popover>
          <PopoverTrigger>Open Date</PopoverTrigger>

          <PopoverContent>
            <DurationPicker />
          </PopoverContent>
        </Popover>
      </DialogContent>
    </Dialog>
  )

//nested popover (does not open)
function DurationPicker() {
  return (
    <Popover modal={false}>
      <PopoverTrigger>
        Duration →
      </PopoverTrigger>

      <PopoverContent side="right">
        Duration content
      </PopoverContent>
    </Popover>
  )
}

[golden rock]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[unborn raptor]

I am quite unsure if you can nest a popover in another popover in a modal, but in every case, you need to forward the ref. So create a forwarding ref component instead of a simple DurationPicker component and we'll see if it works

[tender dew]

Thank you for the advice, I'll try it out and get back to you

oh and i forgot to add, I tried to use dropdownMenu from shadcn as it has a submenu component, but my cursor just passes through the entire dropdown menu, that's why I used popovers

[tender dew]

so I forwarded the ref for duration picker's trigger button it still does not pick up pointer events, I'll need to rethink my approach.

thanks for the useful information!

[unborn raptor]

yes, I think so too

[tender dew]

i think I found a fix, kinda

so I replaced the dialog with popover, so now my form is displayed as a popover

here they are

so now the first popover has a edit button which i use to progammatically open the form popover

and i use "absolute text-transparent right-1/2" to hide the form popover's trigger