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>`