Calendar Not Working In Dialog

[mcakyerima]

Bug report

Current Behavior

i'm building a form that is encapsulated in a Dialog component that is triggered with a button, in the form i have a field for selecting date, so i decided to choose the calendar component that is supposed to show when the calendar is clicked, but clicking the calendar once does not show the date picker, until you double click or triple click rapidly then it displays the date picker, please how do i fix this problem:

here is the code:

<Dialog>
          <DialogTrigger asChild >
            <Button onClick={() => handleUpload("Helo world", orgId)} >
              Upload File
            </Button>
          </DialogTrigger>
          <DialogContent>
            <DialogHeader>
              <DialogTitle className="mb-5">Upload your files here</DialogTitle>
              <DialogDescription>
              <Form {...form}>
                  <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
                    <FormField
                      control={form.control}
                      name="title"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>Title</FormLabel>
                          <FormControl>
                            <Input placeholder="Tender Document" {...field} />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                    <FormField
                      control={form.control}
                      name="description"
                      render={({ field }) => (
                        <FormItem>
                          <FormLabel>Tender escription</FormLabel>
                          <FormControl>
                            <Textarea
                              placeholder="Enter tender description"
                              className="resize-none"
                              {...field}
                            />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                    <div className="flex items-center justify-between gap-4">
                    <FormField
                      control={form.control}
                      name="deadline"
                      render={({ field }) => (
                        <FormItem className="flex flex-col">
                          <FormLabel>Tender deadline</FormLabel>
                          <Popover asChild>
                            <PopoverTrigger asChild>
                              <FormControl >
                                <Button
                                  onSelect={(e) => e.preventDefault()}
                                  variant={"outline"}
                                  className={cn(
                                    "z-30 w-[240px] pl-3 text-left font-normal",
                                    !field.value && "text-muted-foreground"
                                  )}
                                >
                                  {field.value ? (
                                    format(field.value, "PPP")
                                  ) : (
                                    <span>Pick a date</span>
                                  )}
                                  <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
                                </Button>
                              </FormControl>
                            </PopoverTrigger>
                            <PopoverContent className="w-auto p-0" align="start">
                              <Calendar
                                mode="single"
                                selected={field.value}
                                onSelect={field.onChange}
                                disabled={(date) =>
                                   date < new Date(new Date().setHours(0,0,0,0))
                                }
                                initialFocus
                              />
                            </PopoverContent>
                          </Popover>
                          <FormMessage />
                        </FormItem>
                      )}
                    />
                    <FormField
                      control={form.control}
                      name="file"
                      render={({ field: {onChange}, ...field }) => (
                        <FormItem className="mb-1">
                          <FormLabel>File</FormLabel>
                          <FormControl className="h-9">
                            <Input type="file" {...field}
                              onChange={(event) => {
                                if (!event.target.files) return;
                                onChange(event.target.files[0]);
                              }}
                            />
                          </FormControl>
                          <FormMessage />
                        </FormItem>
                      )}
                    />

                    </div>
                    <Button
                     type="submit"
                     className="w-full"
                     >
                      Submit
                    </Button>
                  </form>
                </Form>
              </DialogDescription>
            </DialogHeader>
            <DialogFooter>
              
            </DialogFooter>
          </DialogContent>
        </Dialog>

[mcakyerima]

[ibrahim-ilham]

i'm facing the same issue, please have you fixed it?

[mcakyerima]

Issue Fixed with Custom Dialog Component

Yes, I resolved the issue by creating a custom Dialog component. The conflict was due to event handlers from the Modal and Calendar components clashing. I addressed this by implementing a custom Modal and utilizing Shadcn cards without the built-in popover. Here is the link to the code where I integrated the custom popover with the Forms and Calendar component:

Custom Dialog with Calendar Implementation

drop a ⭐ on the repo if you found it helpful.