I’m encountering an issue with date selection in a modal using a custom Calendar component. Here’s my setup:

I have a UserModal component where I’m using react-hook-form for form management and zod for form validation, the dialog only appears when an entry in a table is clicked to edit that data. Within this modal, I have fields like dateOfBirth and identityExpiry which should allow date selection using a custom Calendar component

The Calendar component appears correctly when I click the button to select a date. However, clicking on a date in the Calendar dismisses it without updating the form field. The selected date doesn’t appear in the input field or update the form state. I am also unable to select a year or month, clicking anywhere on the calender dismisses it.

code snippet:

<Dialog open={isOpen} onOpenChange={onClose}>
            <DialogContent className='w-[880px]'>
                <DialogHeader>
                    <DialogTitle>{mode === 'view' ? 'View User Information' : 'Edit User Information'}</DialogTitle>
                </DialogHeader>

                <Form {...form} >
                    <form onSubmit={
                        form.handleSubmit(
                            (data) => {
                                console.log('Form is valid, submitting', data);
                                handleSubmit(data);
                            },
                            (errors: any) => {
                                console.log('Form has errors', errors);
                            }
                        )
                    } className='grid grid-cols-2 gap-3'>
                        {displayFields.map((key) => (
                            <FormField
                                key={key}
                                control={form.control}
                                name={key as keyof UsersModal}
                                render={({ field }) => (
                                    <FormItem>
                                        <Label htmlFor={key}>
                                            {key.charAt(0).toUpperCase() + key.slice(1)}
                                        </Label>
                                        <FormControl>
                                            {mode === 'edit' ? (
                                                key === 'scope' ? (
                                                    <ChooseboxModify
                                                        onChange={field.onChange}
                                                        value={field.value as string}
                                                        currentScope={user.scope}
                                                        clientIdUser={user.clientId}
                                                    />
                                                ) : key === 'active' ? (
                                                    <div className=''>
                                                        <Checkbox
                                                            checked={field.value as boolean}
                                                            onCheckedChange={field.onChange}
                                                            disabled={disabledFields.includes(key)}
                                                        />
                                                    </div>
                                                )
                                                     

/////Calendar component

: (key === 'dateOfBirth' || key === 'identityExpiry') ? (
                                                        <div className=''>
                                                            <Popover>
                                                                <PopoverTrigger asChild>
                                                                    <Button
                                                                        variant={"outline"}
                                                                        className={cn(
                                                                            "w-full pl-3 text-left font-normal",
                                                                            !field.value && "text-muted-foreground"
                                                                        )}
                                                                    >
                                                                        {field.value ? (
                                                                            format(field.value as Date, "MMM dd, yyyy")
                                                                        ) : (
                                                                            <span>Pick a date</span>
                                                                        )}
                                                                        <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
                                                                    </Button>
                                                                </PopoverTrigger>
                                                                <PopoverContent className="w-auto p-0" align="start">


                                                                    <Calendar
                                                                        mode="single"
                                                                        captionLayout="dropdown-buttons"
                                                                        selected={field.value as Date}
                                                                        onSelect={(date) => field.onChange(date as Date)}

                                                                        fromYear={1960}
                                                                        toYear={2030}
                                                                        initialFocus
                                                                    />
                                                                </PopoverContent>
                                                            </Popover>
                                                        </div>
                                                    )



                                                        : (
                                                            <Input
                                                                {...field}
                                                                value={field.value as string}
                                                                disabled={disabledFields.includes(key)}
                                                            />
                                                        )
                                            ) : (
                                                <div>{String(field.value)}</div>
                                            )}
                                        </FormControl>
                                    </FormItem>
                                )}
                            />
                        ))}

                        {mode === 'edit' && (
                            <div className="flex justify-end gap-2 col-span-3 row-span-3">
                                <Button type="button" variant="outline" onClick={onClose}>
                                    Cancel
                                </Button>
                                <Button type="submit">Save Changes</Button>
                            </div>
                        )}

                        {mode === 'view' && (
                            <div className="flex justify-end gap-2">
                                <Button onClick={onClose} type='submit'>Done</Button>
                            </div>
                        )}
                    </form>
                </Form>
            </DialogContent>
        </Dialog>`