[Bug]: Select example does not update the actual `<form>`'s values

[ahkhanjani]

Describe the bug

The example for the select component in the docs does update React Hook Form's values but not the actual form element's. So form actions will fail because it won't send those values.

To fix, add name prop to <Select>:

<Select name={field.name} onValueChange={field.onChange} defaultValue={field.value}></Select>

Affected component/components

Select, more?

How to reproduce

Copy the form example in the docs

Codesandbox/StackBlitz link

https://github.com/shadcn-ui

Logs

No response

System Info

-

Before submitting

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

[nairanvac]

Thank you for filing this issue and providing a workaround! You've saved me a lot of frustration.

[Tsukishima1]

I happen to encounter this issue, Thank you! :)

[mlynch]

Thank you so much that was driving me nuts

[ahkhanjani]

I'm glad this has helped everyone. The underlying issue should be addressed @shadcn

[wilbsy]

@ahkhanjani I'm having the same problem with the day picker. Do you know the fix in this situation?
Thanks!

<FormField
control={form.control}
name='startDate'
render={({ field }) => (
	<FormItem className='grid grid-cols-4 items-center gap-x-4 gap-y-0'>
		<FormLabel className='text-right'>Start Date</FormLabel>
		<Popover>
			<PopoverTrigger asChild>
				<FormControl>
					<Button
						variant={'outline'}
						className={cn(
							'w-[240px] pl-3 text-left font-normal',
							!field.value && 'text-muted-foreground',
						)}
					>
						{field.value ? (
							format(field.value, 'PPP')
						) : (
							<span>Pick a start date</span>
						)}
						<CalendarIcon className='ml-auto h-4 w-4 opacity-50' />
					</Button>
				</FormControl>
			</PopoverTrigger>
			<PopoverContent className='w-auto p-0' align='start'>
				<Calendar
					mode='single'
					selected={field.value}
					onSelect={field.onChange}
					initialFocus
				/>
			</PopoverContent>
		</Popover>
	</FormItem>
)}
/>```

[ahkhanjani]

@ahkhanjani I'm having the same problem with the day picker. Do you know the fix in this situation? Thanks!

@wilbsy I don't remember having issues with the date picker. Here's my calendar:

<Calendar
  mode="single"
  selected={field.value}
  onSelect={(e) => {
    field.onChange(e!);
    setOpen(false);
  }}
  disabled={(date) => {
    const now = new Date();
    return (
      date.getFullYear() <= now.getFullYear() &&
      date.getMonth() <= now.getMonth() &&
      date.getDate() < now.getDate()
    );
  }}
  initialFocus
/>