DatePicker not opening within Dialog

[daxidngyn]

I am using the standard Dialog component and my DatePicker component is as follows:

"use client";

import * as React from "react";
import { format } from "date-fns";
import { Calendar as CalendarIcon } from "lucide-react";

import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";

export function DatePicker({
  date,
  setDate,
  variant,
  hasIcon = false,
  className,
}: {
  date: Date | undefined;
  setDate: React.Dispatch<React.SetStateAction<Date | undefined>>;
  variant?:
    | "link"
    | "default"
    | "destructive"
    | "outline"
    | "secondary"
    | "ghost"
    | null
    | undefined;
  hasIcon?: boolean;
  className?: string;
}) {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button
          variant={variant}
          className={cn(
            "w-[280px] justify-start text-left font-normal",
            !date && "text-muted-foreground",
            className
          )}
        >
          {hasIcon && <CalendarIcon className="mr-3.5 h-4 w-4" />}
          {date ? format(date, "PPP") : <span>Pick a date</span>}
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-auto p-0">
        <Calendar
          mode="single"
          selected={date}
          onSelect={setDate}
          initialFocus
        />
      </PopoverContent>
    </Popover>
  );
}

where Calendar and Popover are not modified and are the standard components as well.

The DatePicker is not opening when it is wrapped inside of the Dialog. However, the DatePicker works as expected when it is not within a Dialog. I was not encountering this issue a few days ago; I've since reverted my changes and this is still not working.

Am I missing anything here? Thank you!

edit: upon testing, the popover component works fine within the dialog, however fails to open once I nest Calendar inside of PopoverContent. I am able to render Calendar fine outside of the Popover and within the dialog itself.

[not-paul-v]

@daxidngyn did you manage to find a solution to this? I am currently facing the same problem.

One additional observation from my side: The popover works fine if I don't pass in the mode prop.

[daxidngyn]

@not-paul-v no, I have not yet found a solution.

On my end, the issue is only persisting when using Firefox or Safari. Once I switched to Chrome, the DatePicker component was working perfectly, with or without the mode prop.

[not-paul-v]

@daxidngyn I managed to get it working by removing the Popover.Portal component in the popover.tsx file. But I still don't know why that works.

[costaluu]

Currently facing this exactly same problem

[AWash227]

If you get rid of the initialFocus prop it also seems to work. Weird behavior

[austinm911]

I was having this problem too @not-paul-v @daxidngyn . I modified the date picker a little bit to add a "setToday" prop, but otherwise I'm experiencing the same behavior where the dialog opens for 100-300ms then closes. on Firefox and Chrome in my local server this happens. However, on Chrome in the CodeSandbox it opens just fine but I can't select a date. Firefox, same issues.

Also,

I recreated the issue here: https://codesandbox.io/p/sandbox/async-cherry-7jzsym?file=%2Fcomponents%2Fui%2Fform-issue.tsx%3A12%2C15

[MohAlkurdi]

The issue only occurs on Firefox. Removing initialFocus prop solve the issue for me.

[siqueira-gustavo]

@daxidngyn I managed to get it working by removing the Popover.Portal component in the popover.tsx file. But I still don't know why that works.

It worked for me too by removing this. In my case it opens, but I was not being able to select any date. Then I tried what you said and now it works! Thanks! Tried on Firefox and MSEdge.

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

[reinaldo-vombo]

@daxidngyn I managed to get it working by removing the Popover.Portal component in the popover.tsx file. But I still don't know why that works.

Yhe that work for me too, my case it opens, but I was not being able to select any date