Repository: ui
Issue: [bug]: react-hook-form Controller and Select Component Issue: Value Resets to Empty String on Selection (Working in Sandbox, Failing in Local Environment)
Labels: bug

### Describe the bug

I'm working on a React project using **react-hook-form** along with the Controller component to manage a form with Select components. However, I'm running into some issues:

# **Initial Form Submission:**

When I submit the form without interacting with the Select components, everything works as expected, and the default values are submitted correctly.

# **Issue After Selection:**

If I interact with any Select component (e.g., propertyType) and make a selection, the value for that field in the submitted form data becomes an empty string.

# **Placeholder Issue:**
The SelectTrigger does not show the default value or selected option. It only shows the placeholder text ("Select a property type") after making a selection, and even then, it does not display the correct option.

**My Code :**

```
"use client";

import { useForm, Controller } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form";

const formSchema = z.object({
  location: z.string().min(1, "Location is required"),
  propertyType: z.string(),
  purpose: z.string(),
  priceRange: z.string(),
  beds: z.string(),
  filters: z.string(),
});

const propertyTypeOptions = [
  { value: "residential", label: "All in Residential" },
  // Add more options as needed
];

export default function PropertyFilter() {
  const form = useForm({
    resolver: zodResolver(formSchema),
    defaultValues: {
      location: "",
      propertyType: propertyTypeOptions[0].value,
      purpose: "rent",
      priceRange: "any",
      beds: "any",
      filters: "baths-area",
    },
  });

  function onSubmit(values) {
    console.log(values);
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="form-container">
        
        <FormField
          control={form.control}
          name="propertyType"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Property Type</FormLabel>
              <FormControl>
                <Controller
                  name="propertyType"
                  control={form.control}
                  render={({ field }) => (
                    <Select
                      onValueChange={field.onChange}
                      value={field.value}
                    >
                      <SelectTrigger>
                        <SelectValue placeholder="Select a property type" />
                      </SelectTrigger>
                      <SelectContent>
                        {propertyTypeOptions.map((option) => (
                          <SelectItem key={option.value} value={option.value}>
                            {option.label}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  )}
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        
        <button type="submit">Submit</button>
      </form>
    </Form>
  );
}
```


**### Steps Taken:**

- I tried using the Controller component from react-hook-form to manage the Select components.
- I also tried using defaultValue instead of value for the Select component inside the Controller.
- **Weirdly, when I put the exact same code in an online sandbox (like CodeSandbox)**, it works perfectly. The SelectTrigger shows the correct value, and the form data is submitted correctly.
- 

### Affected component/components

Select, Form

### How to reproduce

1 - Set Up A Next.js 14 Project
2 - Install react-hook-form and zod:
`npm install react-hook-form @hookform/resolvers zod`
3 - Create a New Component:
`"use client";

import { useForm, Controller } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form";

const formSchema = z.object({
  location: z.string().min(1, "Location is required"),
  propertyType: z.string(),
  purpose: z.string(),
  priceRange: z.string(),
  beds: z.string(),
  filters: z.string(),
});

const propertyTypeOptions = [
  { value: "residential", label: "All in Residential" },
  // Add more options as needed
];

export default function PropertyFilter() {
  const form = useForm({
    resolver: zodResolver(formSchema),
    defaultValues: {
      location: "",
      propertyType: propertyTypeOptions[0].value,
      purpose: "rent",
      priceRange: "any",
      beds: "any",
      filters: "baths-area",
    },
  });

  function onSubmit(values) {
    console.log(values);
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="form-container">
        
        <FormField
          control={form.control}
          name="propertyType"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Property Type</FormLabel>
              <FormControl>
                <Controller
                  name="propertyType"
                  control={form.control}
                  render={({ field }) => (
                    <Select
                      onValueChange={field.onChange}
                      value={field.value}
                    >
                      <SelectTrigger>
                        <SelectValue placeholder="Select a property type" />
                      </SelectTrigger>
                      <SelectContent>
                        {propertyTypeOptions.map((option) => (
                          <SelectItem key={option.value} value={option.value}>
                            {option.label}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  )}
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        
        <button type="submit">Submit</button>
      </form>
    </Form>
  );
}
`
4 - Test the Component:

Load the component in your app and try submitting the form without interacting with any Select components. Note that the default values are submitted correctly.
Now, interact with the Select component (e.g., propertyType), select an option, and submit the form again. Observe that the value for the selected field is an empty string.
Additionally, note that the placeholder or selected value doesn't display correctly in the SelectTrigger.

### Codesandbox/StackBlitz link

https://codesandbox.io/p/devbox/select-react-hook-form-problem-ygz58v?file=%2Fapp%2Fpage.tsx%3A253%2C54

### Logs

_No response_

### System Info

```bash
Windows 11, Chrome Browser
```


### Before submitting

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