Date picker with popover is not opening

[ashreyas431]

Date picker is put into a separate component and called wherever needed but on clicking the date picker calendar is not showing

[luanlucho]

Same. Works in Chrome but not in Firefox

[erkanaltinors]

I got this error on my Astro project. I've fixed it by adding client directive to react component where it is imported into astro page.

[kitsunekyo]

you can try to hotfix it in your apps by removing the initialFocus attribute on <Calendar. let me know if this works for you.

[PeterGKafkakis]

Taking out initialFocus on datepicker.tsx did work for me.

[imksmv]

Taking out initialFocus on datepicker.tsx did work for me.

Indeed. So now on mobile devices it opens as well.

[diogocezar]

Worked for me too :D thanks <3

[mahamrana703]

Worked for me too

[lmac-1]

Thanks! Date picker wasn't opening for me on Firefox within a modal but removing initialFocus fixed the problem for me.

[sijirama]

ahh, thanks, that definitely did it, after removing initialFocus fixed it.

[M1ck0]

removing initialFocus did not work for me. Any ideas?

After bit of debugging I've noticed that <div data-radix-popper-content-wrapper>...</div> has these CSS styles inlined

    position: fixed;
    left: 0px;
    top: 0px;
    transform: translate(0px, -200%);
    min-width: max-content;
    will-change: transform;
    z-index: 50;

This pushes is out of view

[jassibacha]

So this can actually be fixed by adding modal={true} to the <Popover>, and doesn't lose the initialFocus that way. Suggested here by @morgan4080

[EvansRobbie]

datepicker

I had a similar issue. I used fowardRef in my trigger i.e. button to fix this.

[earhengleap]

So this can actually be fixed by adding modal={true} to the <Popover>, and doesn't lose the initialFocus that way. Suggested here by @morgan4080

It really worked.

[wasiowision]

So this can actually be fixed by adding modal={true} to the <Popover>, and doesn't lose the initialFocus that way. Suggested here by @morgan4080

Thankyou So Much man it works for me 🏆

[mustakimkr]

So this can actually be fixed by adding modal={true} to the <Popover>, and doesn't lose the initialFocus that way. Suggested here by @morgan4080

I was rendering a date picker inside a Sheet. It started behaving weirdly. Then this solution worked for me.

[Rufai-Ahmed]

I an issue where the datepicker's CSS is not looking well.

[Rufai-Ahmed]

[Rufai-Ahmed]

The code:

`"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 DatePickerDemo() { const [date, setDate] = React.useState<Date>();

return ( <Popover modal={true}> <PopoverTrigger asChild> <Button variant={"outline"} className={cn( "w-[280px] justify-start text-left font-normal", !date && "text-muted-foreground" )} > <CalendarIcon className="mr-2 h-4 w-4" /> {date ? format(date, "PPP") : Pick a date} </Button> </PopoverTrigger> <PopoverContent className="w-auto p-0"> <Calendar mode="single" selected={date} onSelect={setDate} /> </PopoverContent> </Popover> ); } `

[efgomes]

Could anyone help me with how to resolve this situation?

[aidrecabrera]

I have also encountered with this issue too. It seems that the date range picker component's styling is broken because of the latest version of react-day-picker, in my case version 9.0.0.

Here is a workaround for this:

1. Delete the problematic version:

pnpm remove react-day-picker

2. Install the older version of react-day-picker

pnpm add react-day-picker@^8.9.1

Hopefully that should fix the issue. Version 8.9.1 is working fine on my end.

Hope this helps! @efgomes @Rufai-Ahmed

[aidrecabrera]

Easiest solution right now is to downgrade to 8.10.1. The react-day-picker team has already been notified of this issue in the v9.0.0 release announcement

Describe the bug

Currently, the component looks like this.

Fix: You can currently fix this by downgrading react-day-picker to version 8.^

Affected component/components

Calendar, Date Picker, ...

How to reproduce

1. Install Calendar component

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

Browsers

Before submitting

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

[liamicy3aaa]

Thanks @aidrecabrera. Now works after downgrading to 8.10.1

[MuhammedNihad]

I too ran into same issue. Datepicker styles were broken. Downgraded to 8.10.1 and it works well. Hope this will be fixed on 9.0.0 soon. Thanks very much @aidrecabrera

[thanhlq]

I got the same issue with 9.0.1, 8.10.1 working fine!

[moha-abdi]

So this can actually be fixed by adding modal={true} to the <Popover>, and doesn't lose the initialFocus that way. Suggested here by @morgan4080

Thanks lad! it works