Open Souzaa1 opened 1 week ago
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>
DataPicker and Form
No response
Browsers in general
I managed to solve it by changing the parent component type, use Dropdown instead of popover
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
Call in the form:
Affected component/components
DataPicker and Form
How to reproduce
Codesandbox/StackBlitz link
No response
Logs
No response
System Info
Before submitting