Open Souzaa1 opened 4 months 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
This bug is still present and @Souzaa1 's solution is still the fix.
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