Select does not show my selected value

[shahryarjb]

Hello, please see these fields, as you see the select of shadcn allways shows the placeholder <SelectValue placeholder="انتخاب کنید" />, and can not able to show default value of my api, but the normal html select show the value.

I have read all the topics the other suggest the value of SelectItem should be string, and my value is string too

my code:

return (
    <div className={`w-full ${configs?.options?.classes}`}>
      <FormField
        control={form.control}
        name={configs.options.fieldName}
        render={({ field }) => (
          <FormItem>
            {configs?.name ? (
              <FormLabel className="text-black mb-2">{configs.name}</FormLabel>
            ) : null}
            <Select
              onValueChange={field.onChange}
              defaultValue={field.value}
            >
              <FormControl>
                <SelectTrigger>
                  <SelectValue placeholder="انتخاب کنید" />
                </SelectTrigger>
              </FormControl>
              <SelectContent>
                {Object.entries(options).map(([key, value]) => (
                      <SelectItem key={key} value={key}>
                        <>
                          {console.log(field.value, key)}
                          {value as React.ReactNode}
                        </>
                      </SelectItem>
                    ))
                  : null}
              </SelectContent>
            </Select>
            <FormMessage />
          </FormItem>
        )}
      />
    </div>
  );

I have changed the defaultValue to value and etc.

By the way, some times I changed an element in page without refresh shadcn select works, but if I refresh this, again you can not be able to see selected value.

I am using nextjs last version with app router and the last version of react-hook-form and zod

Thank you please help me to fix this issue

[jiaulislam]

Hello, please see these fields, as you see the select of shadcn allways shows the placeholder <SelectValue placeholder="انتخاب کنید" />, and can not able to show default value of my api, but the normal html select show the value.

I have read all the topics the other suggest the value of SelectItem should be string, and my value is string too

my code:

return (
    <div className={`w-full ${configs?.options?.classes}`}>
      <FormField
        control={form.control}
        name={configs.options.fieldName}
        render={({ field }) => (
          <FormItem>
            {configs?.name ? (
              <FormLabel className="text-black mb-2">{configs.name}</FormLabel>
            ) : null}
            <Select
              onValueChange={field.onChange}
              defaultValue={field.value}
            >
              <FormControl>
                <SelectTrigger>
                  <SelectValue placeholder="انتخاب کنید" />
                </SelectTrigger>
              </FormControl>
              <SelectContent>
                {Object.entries(options).map(([key, value]) => (
                      <SelectItem key={key} value={key}>
                        <>
                          {console.log(field.value, key)}
                          {value as React.ReactNode}
                        </>
                      </SelectItem>
                    ))
                  : null}
              </SelectContent>
            </Select>
            <FormMessage />
          </FormItem>
        )}
      />
    </div>
  );

I have changed the defaultValue to value and etc.

By the way, some times I changed an element in page without refresh shadcn select works, but if I refresh this, again you can not be able to see selected value.

I am using nextjs last version with app router and the last version of react-hook-form and zod

Thank you please help me to fix this issue

@shahryarjb did you able to solve the issue ? Facing same !

[shahryarjb]

@jiaulislam, I thank you I am not using shadcn anymore and replace it with another pkg. but thank you

[PratikAwaik]

@shadcn Facing this as well. Suddenly, in my app, all the Select dropdown stopped showing value in SelectTrigger. It just shows blank

[lanaschuster]

I'm also having the same problem. The alternative I found was to replace the SelectValue with another component, in my case a span.

<FormField
    control={form.control}
    name="status"
    render={({ field }) => (
        <FormItem>
            <FormLabel>Status *</FormLabel>
            <Select onValueChange={field.onChange} defaultValue={field.value}>
                <FormControl>
                    <SelectTrigger>
                        <span className="capitalize">
                            { field.value }
                        </span>
                    </SelectTrigger>
                </FormControl>
                <SelectContent>
                    <SelectItem value="ativado">Ativado</SelectItem>
                    <SelectItem value="desativado">Desativado</SelectItem>
                </SelectContent>
            </Select>
            <FormMessage />
        </FormItem>
    )}
/>

[PratikAwaik]

@lanaschuster yeah had a similar workaround!

[dMaisnam]

Since you were also using react-hook-form and zod, I managed to come across a similar issue where changing the options i.e <SelectItem> was not updating in the UI and during form submission, the default value keeps getting submitted. I managed to solve this by using the <Controller /> component in react-hook-form

const albumSchema = z.object({
    album_id: z.string().min(1, "Album is required"),
});

const { control } = useForm<IAlbum>({
    defaultValues: { album_id: "" },
    resolver: zodResolver(albumSchema)
});

<Controller
    name="album_id"
    control={control}
    render={({ field }) => (
        <Select value={field.value} onValueChange={field.onChange}>
            <SelectTrigger>
                <SelectValue placeholder="Select Album" />
            </SelectTrigger>
            <SelectContent>
                {data.map(item => (
                    <SelectItem key={item.id} value={String(item.id)}>
                        {item.title}
                    </SelectItem>
                ))}
            </SelectContent>
        </Select>
    )}
/>