[bug]: Shadcn DataPicker

[Souzaa1]

Describe the bug

When the shadcn date picker is inactive in my application it is inside my form, after I initiate the click event on the button it leaves the form and remains as if it had index-0, so I don't have it like clicking on nothing inside my date picker.

DataPicker

type Props = {
 value?: Date;
 onChange?: SelectSingleEventHandler;
 disabled?: boolean;
 initialFocus?: boolean;
}

export const DatePicker = ({
 value,
 onChange,
 disabled,
 initialFocus
}: Props) => {

 return (
 <Popover>
 <PopoverTrigger asChild>
 <Button
 disabled={disabled}
 variant="outline"
 className={cn(
 "w-full justify-start text-left font-normal",
 !value && "text-muted-foreground",
 )}
 >

 <CalendarIcon className="size-4 mr-2" />
 {value ? format(value, "PPPP") : <span>Select a date</span>}
 </Button>
 </PopoverTrigger>
 <PopoverContent align='start'>
 <Calendar
 mode="single"
 selected={value}
 onSelect={onChange}
 disabled={disabled}
 initialFocus={initialFocus}
 />
 </PopoverContent>
 </Popover>
 );
};

Call in the form:

<Form {...form}>
 <form
 onSubmit={form.handleSubmit(handleSubmit)}
 className='space-y-4 pt-4 relative'
 >
 <FormField
 name='date'
 control={form.control}
 render={({ field }) => (
 <FormItem>
 <FormLabel>
 Date
 </FormLabel>
 <FormControl>
 <DatePicker
 value={field.value}
 onChange={field.onChange}
 disabled={disabled}
 initialFocus
 />
 </FormControl>
 </FormItem>
 )}
 />
</form>
</Form>

Affected component/components

DataPicker and Form

How to reproduce

1. DataPicker Inative
2. Click in the button
   3.Calendar appears but I can't click on a specific day

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

Browsers in general

Before submitting

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

[Souzaa1]

I managed to solve it by changing the parent component type, use Dropdown instead of popover

                <CalendarIcon className="size-4 mr-2" />
                {value ? format(value, "PPPP") : <span>Selecione uma data</span>}
            </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="start">
            <Calendar
                mode="single"
                selected={value}
                onSelect={onChange}
                disabled={disabled}
                initialFocus
            />
        </DropdownMenuContent>
    </DropdownMenu>