Next.js Discord

Discord Forum

Popover not opening right

Unanswered
Petit Bleu de Gascogne posted this in #help-forum
Open in Discord
Avatar
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

Avatar
Petit Bleu de GascogneOP
bump
Avatar
Can you share a [Minimum Reproduction Repo](https://nextjs-faq.com/minimal-reproduction-repository)