Popover not opening right
Unanswered
Petit Bleu de Gascogne posted this in #help-forum
Petit Bleu de GascogneOP
Hey! I am using ShadCN and my Popover won't open, until I press very often on the button. thats the form, anyone does have a idea?
<FormField
control={form.control}
name="expires"
render={({ field }) => (
<FormItem>
<FormLabel>Expiration Date</FormLabel>
<Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
<PopoverTrigger asChild>
<FormControl>
<Button
variant={"outline"}
className={cn(
"w-full justify-start text-left font-normal", "text-muted-foreground",
)}
onClick={() => setIsPopoverOpen((prev) => !prev)} // Toggles the popover visibility
>
<CalendarIcon className="mr-2 h-4 w-4" />
<span>Pick a date</span>
</Button>
</FormControl>
</PopoverTrigger>
<PopoverContent className="w-auto p-0">
<Calendar
mode="single"
selected={field.value}
onSelect={(date) => form.setValue("expires", date)} // Updates the form value
initialFocus
/>
</PopoverContent>
</Popover>
<FormDescription>
This is the date, on which the customer will be unsuspended.
Leaving this empty will suspend the customer indefinitely.
</FormDescription>
<FormMessage />
</FormItem>
)}
/>
2 Replies
Petit Bleu de GascogneOP
bump
Can you share a [Minimum Reproduction Repo](https://nextjs-faq.com/minimal-reproduction-repository)