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>
  )
}